Блог

Я сохраняю логическое значение под названием «Завершено», но оно не работает. Оно становится истинным, когда ложно, но не становится ложным снова впоследствии. Действие Redux и функция, которую я написал, следующие. В чем может быть причина этого? Спасибо за заранее.

 const todoSlice = createSlice({
    name: 'todos',
    initialState: {
        todos: []
    },
    reducers: {
        addTodo: (state, action) => {
            state.todos = [...state.todos, action.payload]
        },
        deleteTodo: (state, action) => {
            state.todos = action.payload
        },
        completedTodo: (state, action) => {
            state.todos = action.payload
        }
    }
})

export const {
    addTodo,
    deleteTodo,
    completedTodo
} = todoSlice.actions

export const selectUser = (state) => state.todos;

export const store = configureStore({
    reducer: todoSlice.reducer
})
 

 const Todo = () => {
    const user = useSelector(selectUser);
    const dispatch = useDispatch();

    const checkHandler = (id) => {
        const dene = user.map((item) => {
            if (item.id === id) {
                const comp = item.isCompleted
                return {
                    ...item,
                    isCompleted: !item.isCompleted
                };
            }
        })
        dispatch(completedTodo({dene}))
    }

    const deleteHandler = (id) => {
        const filteredTodos = user.filter(todo => todo.id !== id)
        dispatch(deleteTodo(filteredTodos))
    }

    return (
        user.map((todo) => {
            return <li key={todo.id} className={todo.isChechked ? "todo-item checked" : "todo-item"}>
                <p>{todo.title}</p>
                <div className="btns">
                    <IconButton onClick={() => deleteHandler(todo.id)} className="trash-btn" aria-label="delete">
                        <DeleteIcon />
                    </IconButton>
                    <IconButton onClick={() => checkHandler(todo.id)} className="complete-btn" aria-label="delete">
                        <CheckIcon />
                    </IconButton>
                </div>
            </li>
        })
    )
}

export default Todo
 

Каков наилучший метод логического переключения для Redux?

Вы забыли вернуть другие todo элементы в .map() функции. Это приведет к state.todos неправильному.

 const dene = user.map((item) => {
  if (item.id === id) {
    return {
      ...item,
      isCompleted: !item.isCompleted,
    };
  }
  // notice here
  return item;
});

dispatch(completedTodo(dene));
 

Передайте создателю dene действия напрямую, вы можете получить dene входящий редуктор action.payload .