这是使用redux删除项目的正确方法吗？

我知道我不应该改变input，应该克隆对象来改变它。 我正在遵循一个使用了redux启动器项目的惯例：

ADD_ITEM: (state, action) => ({ ...state, items: [...state.items, action.payload.value], lastUpdated: action.payload.date }) 

添加一个项目 – 我得到使用传播追加数组中的项目。

删除我用过的：

 DELETE_ITEM: (state, action) => ({ ...state, items: [...state.items.splice(0, action.payload), ...state.items.splice(1)], lastUpdated: Date.now() }) 

但是这是突变的input状态对象 – 这是禁止的，即使我正在返回一个新的对象？

Answer 1

不，不要改变你的状态。

即使你正在返回一个新的对象，你仍然在污染你永远不想做的旧对象。 这使旧状态和新状态之间的比较成为问题。 例如在shouldComponentUpdate – shouldComponentUpdate ，react-redux在shouldComponentUpdate使用。 它也使时间旅行不可能（即撤消和重做）。

相反，使用不可变的方法。 始终使用Array#slice ，而不使用Array#slice 。

我从你的代码中假设， action.payload是被删除的项目的索引。 更好的方法如下：

 items: [ ...state.items.slice(0, action.payload), ...state.items.slice(action.payload + 1) ], 

Answer 2

您可以使用数组filter方法从数组中删除特定的元素，而不会改变原始状态。

 return state.filter(element => element !== action.payload); 

在你的代码中，它看起来像这样：

 DELETE_ITEM: (state, action) => ({ ...state, items: state.items.filter(item => item !== action.payload), lastUpdated: Date.now() }) 

Answer 3

ES6的Array.prototype.filter方法返回一个新的数组与条件匹配的项目。 因此，在原来的问题中，这将是：

 DELETE_ITEM: (state, action) => ({ ...state, items: state.items.filter(item => action.payload !== item), lastUpdated: Date.now() })