更新Redux规范化数据时如何避免非关联state切片组件不必要重渲染

问题根因 #

你当前的实现存在两个核心问题：

1. reducer更新逻辑不符合你的数据结构：你将itemId直接挂载到items根层级下，而没有更新items.dict下的对应字段，会直接破坏你的规范化数据结构
2. 若组件订阅了整个items或items.dict对象，只要这个根引用变化就会触发重渲染，没有做状态订阅的粒度拆分

具体优化方案 #

1. 修正不可变更新逻辑 #

逐层复制需要修改的状态层级，保证未修改的对象引用保持不变：

const itemsReducer = (state = initialState.items, action) => {
    switch (action.type) {
        case itemsActions.types.UPDATE_ITEM: {
          const itemId = action.payload.itemId
          return {
            ...state, // 仅复制items根引用
            dict: {
              ...state.dict, // 仅复制dict引用
              [itemId]: {
                ...state.dict[itemId], // 保留原item的其他属性
                title: action.payload.title // 仅更新目标字段
              }
            }
          }
        }
        default: return state
    }
}

这种写法下，只有被修改的item对象会生成新引用，其他未修改的item、index数组的引用都和之前保持一致。

2. 拆分状态订阅粒度 #

使用React Redux的useSelector时，仅订阅组件需要的最小状态单元：

• 单个item组件只订阅对应id的item数据：

  // 仅当当前id对应的item引用变化时，才会触发组件重渲染
  const item = useSelector(state => state.items.dict[props.itemId])
  

• 依赖列表顺序的组件单独订阅index数组：

  // 仅当index数组增删、排序时才会触发重渲染
  const itemIndex = useSelector(state => state.items.index)
  

不要直接订阅整个state.items或state.items.dict，避免无关状态变化触发重渲染。

3. 用缓存选择器优化衍生数据 #

如果需要使用衍生数据（比如完整的item列表、筛选后的列表），可以使用reselect创建带缓存的选择器，只有依赖的原始状态变化时才重新计算结果：

import { createSelector } from '@reduxjs/toolkit'

const selectItemsDict = state => state.items.dict
const selectItemsIndex = state => state.items.index

// 缓存的完整item列表，仅当dict或index变化时才重新生成
export const selectAllItems = createSelector(
  [selectItemsDict, selectItemsIndex],
  (dict, index) => index.map(id => dict[id])
)

4. 用Redux Toolkit简化不可变更新 #

如果使用Redux Toolkit，内置的Immer会自动处理不可变更新逻辑，不需要手动写逐层展开的代码，也能保证只更新必要的引用：

import { createSlice } from '@reduxjs/toolkit'

const itemsSlice = createSlice({
  name: 'items',
  initialState: { index: [], dict: {} },
  reducers: {
    updateItem: (state, action) => {
      const { itemId, title } = action.payload
      // 直接修改状态即可，Immer会自动生成符合不可变原则的更新结果
      state.dict[itemId].title = title
    }
  }
})

export const { updateItem } = itemsSlice.actions
export default itemsSlice.reducer

优化效果 #

调整后，只有订阅了被修改item的组件会触发重渲染，其他组件的状态订阅返回的引用没有变化，不会产生不必要的重渲染，完全符合预期。

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