Блог

У меня есть 3 действия ( add_todo,delete_todo,completed_todo). Добавление и удаление работает нормально, но я должен добавить удаленные элементы в завершенный список, чтобы отобразить их в отдельном компоненте. Но всякий раз, когда я пытаюсь использовать, фильтровать или находить удаленные элементы, я получаю нулевое значение.

Код редуктора :

 const initialState = {
  todos: [],
  completed: [],
};

const todoSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    add_todo(state, action) {
      state.todos = [...state.todos, action.payload];
    },
    delete_todo(state, action) {
      state.todos = state.todos.filter((todo) => todo.id !== action.payload);
    },
    completed_todo(state, action) {
      console.log(state.todos.find((todo) => todo.id === action.payload));
      state.completed = [
        ...state.completed,
        state.todos.filter((todo) => todo.id === action.payload),
      ];
    },
  },
});

export const todoActions = todoSlice.actions;

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

export default todoSlice.reducer;
 

код, по которому я вызываю или отправляю свои действия:

 function TodoList() {
  const dispatch = useDispatch();
  const todos = useSelector(selectTodo);
  const handleDelete = (id) => {
    dispatch(todoActions.delete_todo(id));
    dispatch(todoActions.completed_todo(id));
  };
// Some code and a button with handleDelete 
}
 

Действия будут отправляться одно за другим. После первого действия вы удалите задание из своего состояния . dispatch(todoActions.delete_todo(id)); .filter((todo) => todo.id !== action.payload)

После этого отправляется второе действие dispatch(todoActions.completed_todo(id)); . Но state.todos.find((todo) => todo.id === action.payload) не найдете его, так как он уже удален.

Чтобы исправить это, вы можете поменять местами свои диспетчерские звонки. Сначала заполните его, а затем удалите. Проблема решена 🙂

Проблема здесь в том, что к тому времени, когда вы отправляете действие для получения завершенного списка, ваши удаленные задачи уже исчезли из состояния . Вместо отправки 2 действий . вы можете делать то, о чем вас просят в delete todo действии .

 delete_todo(state, action) {
      // find the todo to delete 
      const deletedTodo = state.todos.find((todo) => todo.id === action.payload);
       state.completed = [
        ...state.completed,
        deletedTodo,
      ];
      state.todos = state.todos.filter((todo) => todo.id !== action.payload);
    },
 

поскольку ваше завершенное задание-это не что иное, как задание, которое вы пытаетесь удалить . ИМХО логично сделать это в том же действии, которое мы используем для отправки для удаления задачи .