prevstate 和 nextstate 在 redux 中是一样的答案

【问题标题】：prevstate and nextstate are the same in reduxprevstate 和 nextstate 在 redux 中是一样的
【发布时间】：2023-02-15 22:43:51
【问题描述】：

我尝试使用 React 和 Redux 创建待办事项列表应用程序，但是当我使用“CheckTodoItem”操作并使用记录器记录时，我的 prevstate 和 nextstate 是相同的。

待办事项列表操作：

const AddTodoItem = ( todo ) =>{
    return{
        type: "ADD_TODO_ITEM",
        payload: todo
    }
}

const CheckTodoItem = ( todo ) =>{
    return{ 
        type: "CHECK_TODO_ITEM",
        payload: todo 
    }
}

const DeleteTodoItem = ( todo ) =>{
    return{ 
        type: "DELETE_TODO_ITEM",
        payload: todo 
    }
}

export { AddTodoItem, CheckTodoItem, DeleteTodoItem }

TodoLIst 减速器：

const initialState = {
    todoList: [
        { todo: "workout" , isCheck: false},
        { todo: "home work" , isCheck: false},
        { todo: "pay bils" , isCheck: false},
        { todo: "visit ali" , isCheck: false},
        { todo: "Buying household items" , isCheck: false},
    ],
}

const todoListReducer = ( state = initialState , action ) => {
    switch ( action.type ) {
        case "ADD_TODO_ITEM":
            const Todo = {
                todo: action.payload,
                isCheck: false,
            };
            state.todoList.push( Todo );
            return{
                ...state
            }

        case "DELETE_TODO_ITEM":
            const newTodoList = state.todoList.filter( item => item.todo !== action.payload)
            return {
                ...state,
                todoList: newTodoList,
            }

        case "CHECK_TODO_ITEM":
            const objIndex = state.todoList.findIndex(( obj => obj.todo === action.payload ));
            state.todoList[objIndex].isCheck = true
            return{
                ...state,
            }

        default : 
            return state
    }
}

export default todoListReducer

记录器： enter image description here

我已经尽我所能，但我不知道为什么它不能正常工作

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

您的代码中的问题是您直接修改减速器中“CHECK_TODO_ITEM”案例中的状态。在 Redux 中，你不应该直接修改状态。相反，您应该始终使用更新后的数据创建一个新的状态对象。

试试这个代码而不是：

case "CHECK_TODO_ITEM":
  const objIndex = state.todoList.findIndex((obj => obj.todo === action.payload));
  const updatedTodoList = state.todoList.slice(); // create a new copy of the todo list array
  updatedTodoList[objIndex] = {...updatedTodoList[objIndex], isCheck: true}; // update the relevant todo item
  return {
    ...state,
    todoList: updatedTodoList // return a new state object with the updated todo list
  };

【讨论】：