Redux reducer 无法删除数组元素

Question

我在尝试让我的减速器在 Redux 中正常工作时遇到问题。我是 Redux 的新手，所以我可能会遗漏一些简单的东西，但我已经玩了一段时间，无法弄清楚出了什么问题。

这是我的过程：

定义参数：

首先我定义了我需要的索引值。登录后，这个 returns 正确的数字...

const thisCommentIndex = parseInt(comments.indexOf(comment))

函数调用：

<div onClick={this.props.removeComment.bind(null, thisCommentIndex)}></div>

操作：

export function removeComment(index) {
   return {
      type: 'REMOVE_COMMENT',
      index
   }
}

减速器：

function comments(state = [], action) {
   switch(action.type) {
      case 'REMOVE_COMMENT' :
         console.log('removing comment with index of ' + action.index)
         return [
            ...state.slice(0, action.index), // why isn't this working???
            ...state.slice(action.index)
         ]
      default :
         return state
   }
   return state;
}

当我 console.log('removing COMMENT with index of ' + action.index) 时，它会正确记录 action.index，这是我期望的整数。但是函数并没有像预期的那样删除元素。

奇怪的是，如果我只是传递数组索引，它工作正常（删除数组元素）。（我会这样做，但由于我的方式设置我的应用程序，它在这种情况下不起作用）。

我是不是漏掉了什么？任何帮助表示赞赏。

Answer 1

您缺少 +1...

return [
  ...state.slice(0, action.index),
  ...state.slice(action.index + 1) // <--- need to actually skip what you want to remove
]

Answer 2

@杰克是正确的。另一种选择是使用 Array.filter 代替：

return state.filter( (item, index) => index !== action.index)

你可能对新的感兴趣Structuring Reducers section of the Redux docs. In particular, the page on Immutable Update Patterns有一些相关的例子。

Answer 3

如果你想删除多个项目，那么你可以反向处理你的数组

 for (var i = this.props.items.length -1; i >= 0; --i) {
   if(this.props.items[i]["selected"]) {
     this.props.deleteSelectedItem(i);
   }
 }

Redux reducer 无法删除数组元素

Redux reducer failing to remove array element

javascript

arrays

reducers

reactjs

redux

定义参数：

函数调用：

操作：

减速器：