在基本待办事项项目中"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;

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);将正确筛选并返回一个新的数组对象，该对象包含具有不匹配id属性的所有todo。

调度操作以删除待办事项

删除todos操作需要连接到您的UI假设您的代码已经可以正确添加todo

给定动作创建者

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

你只需要将调度映射到动作创作者的道具，并连接

const mapDispatchToProps = {
deleteTodo,
};
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

现在，您将有一个deleteTodo回调封装在一个调用中，以便在组件中调度使用。

提醒，react组件通过props，而不是"；状态">。

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中，您应该有Actions，即DELETE_TODO'和Dispatcher，通过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组件中，您需要从存储中选择状态让你的调度员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],);