Redux状态未更新问题：React通知队列长度变更组件未感知如何解决

该问题确实和组件重渲染逻辑直接相关，由两个核心错误共同导致：

1. 违反Redux不可变更新原则，状态变更未被检测 #

Redux依赖引用变化判断状态是否更新，默认对useSelector的返回值做浅比较。你的代码存在两处违反不可变原则的操作：

• 直接修改从Redux获取的state对象：在timeoutNotification的setTimeout回调中，你直接对闭包捕获的notify.queue执行shift()操作，这属于直接修改Redux原始state，属于被禁止的操作
• 更新队列时未返回新数组引用：你执行shift后直接将原数组引用传给SetNewQueue action，若你的reducer直接将该引用赋值给state的queue字段，queue的引用没有发生变化，useSelector会认为状态未更新，不会触发组件重渲染，因此你看不到queue长度从0变为1的变更。

2. 闭包捕获旧State值，队列消费逻辑异常 #

你通过useSelector获取的notify对象，会被组件内部的timeoutNotification、showNotifications函数闭包捕获，闭包里的notify永远是函数创建时的版本，不会跟随Redux状态更新。
当第五条通知入队后，setTimeout回调触发时读取的还是回调创建时的旧notify值，此时旧值里的queue长度是0、active长度是4，因此不会触发队列消费逻辑，队列里的第一条通知一直卡着。等到你第二次添加通知时，id更新触发组件重渲染，闭包拿到了新的notify值，此时才会识别到队列长度为2。

• 所有Redux状态修改都放在reducer中完成，严格遵循不可变更新规范：新增队列元素时返回queue: [...state.queue, payload]，移除队列首元素时返回queue: state.queue.slice(1)，每次更新都生成全新的数组引用
• 避免在组件的闭包中读取Redux状态，将队列消费逻辑移到Redux Thunk中，通过getState()方法读取最新的状态，彻底规避闭包旧值问题
• 若需要在组件中监听队列变化，可以单独选取需要的字段，例如const queueLength = useSelector(state => state.notify.queue.length)，更精准触发重渲染

内容的提问来源于stack exchange，提问作者lorianla