使用过滤函数(Redux+ react)通过索引从列表中删除待办事项

Question

我正在尝试熟悉Redux，试图构建一个简单的待办事项列表。我正在努力理解为什么用这个代码我不能从列表中删除一个待办事项。我想使用索引，而不是通常的id为每个待办事项。以下是我目前所做的:

export const saveTodo = createSlice({
name: 'manageList',
initialState,
reducers: {
addTodoToList: (state, action) => {
state.todoList.push(action.payload)
},
removeTodoToList: (state, action) => {
state.todoList.filter((todo, index) => index !== action.payload)
}
}
})

这是在List组件中我分派reducer的地方:

<div className='list'>
{todoList?.map((todo, index) => {
return <h1 key={index}>{todo}<span onClick={() => dispatch(removeTodoToList(index))}>x</span></h1>
})}
</div>

为什么这个方法不起作用?考虑到redux工具包的使用，我是否应该使用splice这样的可变性函数?给待办事项分配一个id，会使它成为一个更好的选择吗?由于

Answer 1

Filter根据文档创建一个新的数组

这意味着state.todoList.filter((todo, index) => index !== action.payload)正在过滤并创建一个新的数组，它只是没有被分配到你的状态。

你可以这样做:

// example 1
state.todoList = state.todoList.filter((todo, index) => index !== action.payload)
// example 2
return {
...state,
todoList: state.todoList.filter((todo, index) => index !== action.payload)
}

考虑到redux工具包的使用，我是否应该使用像splice这样的可变性函数?给待办事项分配一个id，会使它成为一个更好的选择吗?由于

这取决于偏好。由于我来自史前时代(工具包/immer之前)，我更喜欢使用不会改变状态的语法。但作为一般建议，只要使用你觉得舒服的，并坚持使用。

需要注意的一点是，不改变状态的语法更有利于向后兼容;因此，如果你经常使用它，当你不得不重构/维护不使用toolkit或immer的redux代码时，你会准备得更好。