為什么 Redux 減速器上的計時器有助於觸發重新渲染

Question

我遇到了一些奇怪的行為，我會覺得理解這些行為會更安全

下面是我的減速器的代碼。 我不明白為什么，但是使用此代碼，綁定到 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,
      }
}

與我的減速器中的其他操作相比，我終於猜到了操作的時間成本，其他一些稍微復雜一點的操作似乎效果更好......

所以我加了一個計時器

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

繁榮，它奏效了！

我真的不喜歡這個高度hacky的解決方案。

有沒有人知道發生了什么以及我如何以更好的方式解決這個問題。

注意事項：

• 我正在研究本機反應，但似乎沒有關系
• 在組件中，使用useSelector鈎子選擇 redux 狀態

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

Answer 1

"allItems.unshift(action.item)" 將數據直接添加到reducer state，因為allItems 被引用到redux state 變量。 因此，在返回狀態之前，您正在更新減速器。 返回狀態后，redux 數據不會有任何變化，因此組件不會被重新渲染。

為了更好地理解，請參閱此答案https://stackoverflow.com/a/48819216/7822241

Answer 2

這是解決方案，在 Mohan Krisgna Sai 的幫助下回答。

我確實在不知道的情況下改變了狀態，因為當您將變量分配給引用類型（即：對象）時，該變量僅保存對實際存儲對象的內存位置的引用，而不是實際對象本身。 此處的更多詳細信息： https : //stackoverflow.com/a/50840423/13337619

所以，這是改變狀態

allItems = state.allItems
allItems.unshift(action.item)

解決方案很簡單：

    case CREATE_ITEM:
      return {
        ...state,
        allItems: [action.item, ...state.allItems],
      }