reducer case set value delayed response

Question

When I dispatch "REMOVE_TODO" on button click it does what I want it to do, the problem I'm having is that when it executes. It doesn't return the correct current array length.

Now when I click an item, it will dispatch "TOGGLE_TODO" which will change the font color and put a line-through the text.

Now while toggled and I click the "Clear Completed" button, it toggles "REMOVE_TODO" and works fine. It removes the items toggled. The problem I'm having is that The number doesn't reflex the current amount of items left in the list when I click the button once..

However if I click the button once more (or however many more times) the number updates to the correct total

This is my app code

import React, { useState, useReducer } from 'react';
import { Reducer } from './reducers/reducer';
import './App.css';

function App() {
  const [{ todos, todoCount }, dispatch] = useReducer(Reducer, { 
    todos: [], 
    todoCount: 0,
    completedCount: 0
  });
  const [text, setText] = useState("");

  return (
    <div className="App">
      <header className="App-header">
        <div>ToDo List [ <span style={{color: '#61dafb', margin: '0px', padding: '0px'}}>{ todoCount }</span> ]</div>
        <div>
          { todos.map((todo, index) => (
              <div 
              key={index} 
              onClick={() => dispatch(
                { type: "TOGGLE_TODO", index }
              )}
              style={{
                fontFamily: 'Tahoma',
                fontSize: '1.5rem',
                textDecoration: todo.completed ? 'line-through' : "",
                color: todo.completed ? '#61dafb' : 'dimgray',
                cursor: 'pointer'
              }}
              >
                { todo.text }
              </div>
            )) 
          }
          <form
            onSubmit={e => {
              e.preventDefault();
              text.length === 0 ? alert("No Task To Add!") : dispatch({ type: "ADD_TODO", text });
              setText("");
            }}
          >
            <input 
              type="text"
              name="input"
              value={ text }
              onChange={e => setText(e.target.value)}
            /><br />
            <button>
              Add
            </button>
          </form>
          <button onClick={() => {dispatch({ type: "REMOVE_TODO" })}}>
            Clear Completed
          </button>
        </div>
      </header>
    </div>
  );
}

export default App;

and this is my reducer code

export const Reducer = (state, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return { 
                todos: [...state.todos, { text: action.text, completed: false, id: Date.now() }],
                todoCount: state.todoCount + 1,
                completedCount: 0
            };
        case 'TOGGLE_TODO':
            return { 
                todos: state.todos.map((todo, index) => index === action.index ? { ...todo, completed: !todo.completed } : todo),
                todoCount: state.todoCount,
                completedCount: 0
            };
        case 'REMOVE_TODO':
            return {
                todos: state.todos.filter(t => !t.completed),
                todoCount: state.todos.length
                }
        default:
            return state;
    };
 };

Does anyone have any idea what I'm doing wrong, or what I'm not doing? Thanks in advance!

Answer 1

Remove "todoCount" from reducer, then derive count using "todos":

    <div>
      ToDo List [{" "}
      <span style={{ color: "#61dafb", margin: "0px", padding: "0px" }}>
        {todos.filter((todo) => !todo.completed).length}
      </span>{" "}
      ]
    </div>

View in CodeSandbox here