时间戳

首页 > 解决方案 > 为什么 Redux reducer 上的计时器会帮助触发重新渲染

javascript - 为什么 Redux reducer 上的计时器会帮助触发重新渲染

问题描述

我遇到了一些奇怪的行为，我会觉得理解起来更安全

下面是我的减速器的代码。我不明白为什么，但是使用这段代码，绑定到 redux 状态的组件不会重新渲染。我可以通过开发者工具判断状态已正确更新。

const initialState = {
  allItems: [],
  favItems: [],
}

export default (state = initialState, action) => {
  let allItems

    case CREATE_ITEM:
      allItems = state.allItems
      allItems.unshift(action.item)
      return {
        ...state,
        allItems: allItems,
      }
}

和我的reducer中的其他动作比较，我终于猜到了操作的时间成本，其他一些稍微复杂一点的操作似乎效果更好......

所以我添加了一个计时器

case CREATE_ITEM:
      allItems = state.allItems
      allItems.unshift(action.item)
      setTimeout(() => {
        return {
          ...state,
          allItems: allItems,
        }
      }, 0)

繁荣，它奏效了！

我真的不喜欢这种高度hacky的解决方案。

有没有人知道正在发生的事情以及如何以更好的方式解决这个问题。

备注：

const items = useSelector((state) => state.items.allItems)

标签： javascriptreactjsreduxreact-redux

解决方案

“allItems.unshift(action.item)” 直接将数据添加到reducer状态，因为allItems引用了redux状态变量。因此，在返回状态之前，您正在更新减速器。返回状态后，redux 数据不会有任何变化，因此不会重新渲染组件。

为了更好地理解，请参阅此答案https://stackoverflow.com/a/48819216/7822241

推荐阅读