基本todo项目中的"DELETE_TODO“

Question

嗨，我是一个非常新手的redux，我创建了一个基本的todo应用程序，但我不知道如何使删除缩减。这就是我所尝试的，我需要更改什么，以及如何在我的Todolist.js文件中发送它。

Reducers.js

const todos = (state = [], action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false,
        },
      ];
    case "DELETE_TODO":
      return state.filter((todo) => todo.id !== action.id);
    default:
      return state;
  }
};

export default todos;

TodoList.js(在这里，当我单击按钮时，我想删除它)。

import React from "react";
import { connect } from "react-redux";
import { deleteTodo } from "../actions";

const mapStateToProps = (state) => {
  return {
    todos: state,
  };
};

const TodoList = (state) => {
  console.log(state);
  return (
    <div>
      <ul>
        {state.todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default connect(mapStateToProps)(TodoList);

actions.js

let nextTodoId = 0;

export const addTodo = (text) => ({
  type: "ADD_TODO",
  id: nextTodoId++,
  text,
});

export const deleteTodo = (id) => {
  return {
    type: "DELETE_TODO",
    id: id,
  };
};

我知道这很基本，但我需要帮助。

Answer 1

reducer在我看来很好，return state.filter((todo) => todo.id !== action.id);将正确过滤并返回一个新的数组对象，其中所有的todo都带有一个不匹配的id属性。

调度删除待办事项的操作

删除待办事项操作需要连接到您的UI。假设你的代码已经可以正确添加todo了。

给定的操作创建者

const deleteTodo = (id) => ({
  type: "DELETE_TODO",
  id: id,
});

您只需要将调度映射到动作创建者的属性并连接

const mapDispatchToProps = {
  deleteTodo,
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

现在，您将拥有一个包装在调用中的deleteTodo回调，以便分派以便在组件中使用。

提醒一下，react组件传递的是状态，而不是“__”。

const TodoList = ({ deleteTodo, todos }) => {
  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button
              type="button"
              onClick={() => deleteTodo(todo.id)} // <-- call action and pass id
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

Answer 2

在Redux中，你应该有一个动作，即'DELETE_TODO‘和一个分派器，通过一个Reducer来将你的动作分派到你的store，以生成或修改State，这样你的组件就可以从Store中选择。然而，在这里，你可以添加到你的代码中，希望能让它工作。actions.js

export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';

export const addTodo = (todo) => ({
  type: ADD_TODO,
  payload: todo,
});

export const deleteTodo = (id) => ({
  type: DELETE_TODO,
  payload: id,
});

在reducers.js中

import { ADD_TODO, DELETE_TODO } from './actions';
const initialState = { todos: [], };
const TodoList = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    case DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload),
      };
    default:
      return state;
  }
};

export default TodoList;

现在，在您的TodoList.js组件中，您需要从存储中选择状态，并将dispatchers设置为TodoList.js

import React,{useCallback} from 'react'
import { useDispatch } from 'react-redux'
// import addTodo and deleteTodo from where you put store i.e:
// import { addTodo, deleteTodo } from '../store/todos/actions'
// import todoList from '../store/todos/reducers


// from here goes inside your component

const dispatch = useDispatch();
const onDeleteTodo = useCallback(id) => dispatch(deleteTodo(id)), [dispatch],);
const onAddTodo = useCallback(todo) => dispatch(addTodo(todo)),[dispatch],);