在 redux 中实现 reselect 可以防止新的更改立即出现答案

【问题标题】：Implementing reselect in redux prevents new changes to appear instantly在 redux 中实现 reselect 可以防止新的更改立即出现
【发布时间】：2021-03-13 05:17:36
【问题描述】：

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

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

为什么会这样？有没有办法在不删除重新选择库的情况下解决这个问题

编辑：问题已解决，正如答案中指出的那样，这是因为我只是在改变状态

之前的代码如下

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

我替换为

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

解决了这个问题

【问题讨论】：

是的！您正在修改状态，而不是返回新的修改状态。

标签： reactjs redux react-redux frontend reselect

【解决方案1】：

您很可能在减速器中返回突变状态，而不是返回新数组。

Docs:

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
  }
}

【讨论】：