Redux Toolkit：配置Selector消除记忆化警告问题咨询

核心问题分析 #

1. 空数组引用重复创建：最初的selector中，当chatId不存在或对应消息数据为空时，每次都会返回新的空数组[]。由于JS数组是引用类型，每次生成的[]都是不同引用，导致useSelector判定结果变化，触发警告。
2. Reducer违反不可变性原则：你的reducer直接修改原state对象的引用（existingMessages = state.messagesData后直接修改属性），没有创建新对象。这会导致Redux无法正确追踪状态变化，同时干扰useSelector的比较逻辑。

具体解决方案 #

1. 修复Reducer的不可变性问题 #

Redux要求reducer必须是纯函数，所有状态更新都要通过创建新对象实现，不能直接修改原state。修改后的reducer代码：

setChatMessages: (state, action) => {
    const {chatId, messagesData} = action.payload
    // 解构原对象，创建新的messagesData容器，添加/更新指定chatId的消息
    state.messagesData = {
        ...state.messagesData,
        [chatId]: messagesData
    }
},

如果使用Redux Toolkit（默认集成Immer），当前写法可保留；若为普通Redux，必须按上述方式创建新对象。

2. 优化Selector避免重复创建空数组 #

你在编辑3中复用同一个空数组引用的方式是正确的，能彻底解决空数组导致的引用变化问题。代码可简化为：

// 组件内定义复用的空数组，避免重复创建新引用
const emptyMessages = []

const chatMessages = useSelector(state => {
  if (!chatId) return emptyMessages
  return state.messages.messagesData[chatId] || emptyMessages
})

这样无论selector调用多少次，空状态下返回的都是同一个数组引用，useSelector的严格相等比较会直接通过，不会触发警告。

3. 关于shallowEqual的使用场景 #

在这个场景下，若已经修复reducer不可变性问题并优化了空数组引用复用，其实不需要使用shallowEqual：

• 当消息数据存在时，selector返回的是state.messages.messagesData[chatId]的引用，reducer更新时会创建新引用（或保证内容变化时引用同步更新），严格相等比较能正确检测到状态变化。
• 当消息数据为空时，复用的空数组引用保证了比较一致性。

但如果你的messagesData是复杂对象，且存在“内容不变但引用意外变化”的情况，可将shallowEqual作为useSelector的第二个参数，通过比较对象浅层属性避免不必要的重渲染：

import { shallowEqual, useSelector } from 'react-redux'

const chatMessages = useSelector(state => {
  if (!chatId) return emptyMessages
  return state.messages.messagesData[chatId] || emptyMessages
}, shallowEqual)

额外优化：FlatList的数据处理 #

结合复用的空数组，优化FlatList的数据逻辑，避免重复创建空数组：

<FlatList
  data={chatMessages ? Object.values(chatMessages) : emptyMessages}
/>

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