为什么Redux还原器上的计时器有助于触发重新渲染

Question

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

下面是我的减速器的代码。我不知道为什么，但使用此代码，绑定到redux状态的组件不会重新渲染。我可以用developer工具告诉您，状态已正确更新。

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)

轰，成功了！

我真的不喜欢这种高度粗糙的解决方案

有人知道发生了什么，以及我如何才能更好地解决这个问题吗。

注：

• 我正在研究react native，但它似乎并不相关
• 在组件中，使用useSelector钩子选择redux状态

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

Answer 1

"allItems.unshift(action.item("将数据直接添加到reducer状态，因为allItems被引用到reduce状态变量。因此，在返回状态之前，您正在更新reducer。返回状态后，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],
}