Question

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

这是我的流程：

定义参数：

首先，我定义了我需要的索引值。记录时，返回正确的数字......

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

@Jack是对的。另一种选择是使用Array.filter代替：

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

您可能对Redux文档的新Structuring Reducers部分感兴趣。特别是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无法删除数组元素

定义参数：

函数调用：

动作：

减速机：

3 个答案: