在redux中实现重选可以防止立即出现新的更改

Question

在我的React项目中，我使用reselect库实现了记忆。状态基本上有一个对象列表，我将其渲染为卡片。

在实现重新选择之前，每当我添加一个新元素时，更改就会立即出现，并在最后添加一张新卡片。但是，现在当我添加一个新元素时，它不会立即显示，而是在页面重新加载时显示。

为什么会发生这种情况?有没有办法在不删除使用reselect library

的情况下修复这个问题?编辑:这个问题已经解决了，正如在答案中指出的那样，这是因为我只是改变了状态

前面的代码如下

case IssueActionTypes.ADD_ISSUE:
state.issueList.push(action.payload)
return {
...state
}

用

代替

case IssueActionTypes.ADD_ISSUE:
return {
...state,
issueList : [...state.issueList, action.payload]
}

修复了这个问题

Answer 1

你很可能在你的reducer中返回变异状态，而不是返回一个新的数组。

文档:

createSelector使用身份检查(===)来检测输入已更改，因此更改现有对象将不会触发选择器重新计算，因为改变对象不会改变其的身份。注意，如果您正在使用Redux，请改变状态对象几乎可以肯定是个错误。

返回突变状态的示例(来自文档):

export default function todos(state = initialState, action) {
switch (action.type) {
case COMPLETE_ALL:
const areAllMarked = state.every(todo => todo.completed)
// BAD: mutating an existing object
return state.map(todo => {
todo.completed = !areAllMarked
return todo
})
default:
return state
}
}