如何在Redux中更新单个状态值而不触发组件全量重渲染

结论 #

完全可以实现，只需要调整Redux状态更新逻辑、以及组件的状态订阅规则两部分即可。

步骤1：编写单字段更新的Redux逻辑 #

Redux要求遵循不可变更新原则，你不需要重写整个状态树，只需要更新变化的层级即可，未变化的对象可以直接复用原有引用，不会触发不必要的变更检测。

首先定义updateData action：

// payload 传入三个参数：要更新的对象索引、要修改的字段名、目标值
const updateData = (itemIndex, fieldName, targetValue) => {
  return {
    type: 'UPDATE_SINGLE_FIELD',
    payload: { itemIndex, fieldName, targetValue }
  }
}

然后在reducer中处理该action，仅修改对应字段：

const initialState = {
  // 你原本的状态结构
}

const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'UPDATE_SINGLE_FIELD':
      const { itemIndex, fieldName, targetValue } = action.payload
      return {
        // 保留第一层其他对象的原有引用
        ...state,
        [itemIndex]: {
          // 保留当前修改对象的其他属性原有引用
          ...state[itemIndex],
          [fieldName]: targetValue
        }
      }
    // 其他原有case逻辑保留
    default:
      return state
  }
}

如果你使用的是Redux Toolkit，代码会更简洁，内置的Immer允许你直接写可变语法，底层自动生成符合不可变原则的状态：

// Redux Toolkit 中的reducer写法
import { createSlice } from '@reduxjs/toolkit'

const dataSlice = createSlice({
  name: 'data',
  initialState,
  reducers: {
    updateData: (state, action) => {
      const { itemIndex, fieldName, targetValue } = action.payload
      state[itemIndex][fieldName] = targetValue
    }
  }
})

步骤2：优化组件的状态订阅逻辑 #

组件会全量重渲染的核心原因是你之前大概率直接订阅了整个状态对象，只要状态树任何属性变化都会触发重渲染。你需要调整为精准订阅需要的属性：

import { useSelector } from 'react-redux'

// ❌ 错误写法：订阅整个状态对象，任意属性变化都会触发重渲染
// const allData = useSelector(state => state.data)

// ✅ 正确写法：只订阅你需要的字段，只有该字段变化才会触发重渲染
const itemState = useSelector(state => state.data[2]?.state)

如果你的组件确实需要使用某个完整的对象，可以给useSelector传入浅比较规则，只有对象内部属性发生变化时才会触发重渲染：

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

const targetItem = useSelector(state => state.data[2], shallowEqual)

调整完成后，只有你修改的指定字段会触发对应依赖该字段的组件更新，不会出现全量重渲染、显示spinner的问题。

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