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

编程问答 2022-05-21

问题描述

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

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

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

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

之前的代码如下

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

我替换为

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

解决了问题

解决方法

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

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