Question

我正在尝试使用redux制作待办事项应用程序，我在堆栈上讨论如何从阵列中删除待办事项。

reducer.js

export default function todo(state, action) {
switch (action.type) {
  case 'ADD_TODO':
    return [
      ...state,

      {
        id: action.id,
        text: action.text,
        completed: false
      }
  case 'REMOVE_TODO':
    return {
      id: action.id,
      ...state.slice(id, 1)
    }
  default:
    return state;
 }
}

action.js

let nextTodoId = 0
export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

export const removeTodo = id => {
  type: 'REMOVE_TODO',
  id
}

到目前为止，我可以添加和切换待完成的待办事项。谢谢

Answer 1

使用redux，您需要返回所有数组元素，但从reducer中删除的数组元素除外。

我个人更喜欢使用Array的filter方法。它将返回符合特定条件的state数组的浅表副本。

case 'REMOVE_TODO':
return state.filter(({id}) => id !== action.id);

Answer 2

在react redux应用程序中，您应该知道，您始终必须创建一个新对象，要删除项目，请使用传播运算符：

return [...state.filter(a=>a.id !== id)]

使用Redux从数组中删除元素

2 个答案: