单击后无法使用reducer React JS更新值

Question

I'm currently learning useReducer and try to convert useState to useReducer in todo app. My problem :

1. TOGGLE_TODO can't update the value when click.

// First try
case TOGGLE_TODO:
   let targetId = todoItem[action.index];
   let newTodo = [...todoItem];
   return (newTodo[targetId].completed = !newTodo[targetId].completed);

// Second try
case TOGGLE_TODO:
   return todoItem.map((todo, index) => {
       if (index === action.index) {
          return { ...todo, completed: !todo.completed };
       }
       return todo;
});

<button
    value={index}
    onClick={(event) =>
       dispatch({
          type: TOGGLE_TODO,
          index: event.target.value,
       })
    }
 >
    {todo.completed ? "done" : "pending"}
 </button>

2. UPDATE_TODO, I have no clue for convert this to useReducer. Can I convert this too ? Here is my code using useState.

const onUpdate = (e) => {
   const target = e.currentTarget.value;
   const todoTarget = todoItem[target].name;
   setInput(todoTarget);
   setTodoIndex(target);
};

And here is my codesandbox for full code. MY CODE USING USESTATE and MY CODE USING USEREDUCER

Answer 1

First, you first TOGGLE_TODO handler if flawed -

// First try
case TOGGLE_TODO:
   let targetId = todoItem[action.index];
   let newTodo = [...todoItem];
   return (newTodo[targetId].completed = !newTodo[targetId].completed);

Your todoAction is actually a reducer and not an action, so you should rename it to todoReducer . Also, a reducer needs to return a new copy of the entire state, and not just change one part of it, so your second try is correct.

case TOGGLE_TODO:
   return todoItem.map((todo, index) => {
       if (index === action.index) {
          return { ...todo, completed: !todo.completed };
       }
       return todo;
});

Notice how in the first case you are returning one todoItem, where in the second case you are returning an entire new array.

The problem with the code is that in your button, when you dispatch the action with the value, you are dispatching a string -

<button
    value={index}
    onClick={(event) =>
       dispatch({
          type: TOGGLE_TODO,
          index: event.target.value,  // <- This is a string
       })
    }
 >
    {todo.completed ? "done" : "pending"}
 </button>

And in your reducer you are trying to compare it to a number -

if (index === action.index) // This will always be false since index is a .number and action.index is a string

The solution is to dispatch a number like so -

dispatch({
          type: TOGGLE_TODO,
          index: Number(event.target.value),
       })

working codesandbox - https://codesandbox.io/s/long-monad-5yzjv7?file=/src/App.js