如何在Redux reducer中替换整个数组并保证应用正常重新渲染

问题根源 #

第一版代码问题 #

初始state为数组类型，但CHANGE_ARRAY分支返回的是带array属性的对象，状态类型直接不一致，组件读取数据的逻辑匹配错误，自然无法正确响应更新。

第二版代码问题 #

你第二版的reducer不可变更新写法本身符合规范，不触发重渲染通常是两个原因：

1. 派发action时传入的action.array和store中现存的array是同一个内存引用，Redux默认浅比较会判定状态未变更，不会触发重渲染
2. 组件连接Redux的取值逻辑错误，比如直接返回整个reducer状态对象，或者读取路径不对

修复方案 #

方案1：保持状态为包含数组的对象（第二版写法调整） #

在reducer中强制创建新数组副本，保证引用一定发生变化：

const arrayReducerDefaultState = {
    array: []
}

const arrayReducer = (state = arrayReducerDefaultState, action) =>{
    switch(action.type){
        case "CHANGE_ARRAY":
            return {
                ...state,
                // 强制生成新数组副本，确保引用变化
                array: [...action.array]
            }
        default:
            return state
    }
}

同时检查组件取值逻辑：

• 用connect的mapStateToProps时，直接返回array字段，不要返回整个状态对象：

const mapStateToProps = state => ({
  // 假设你的reducer在combineReducers中注册为arrayModule
  targetArray: state.arrayModule.array
})

• 用useSelector时同样直接取array字段：

const targetArray = useSelector(state => state.arrayModule.array)

方案2：保持state本身就是数组 #

如果你不需要额外的状态字段，直接让state为数组本身，写法更简洁：

const arrayReducerDefaultState = []

const arrayReducer = (state = arrayReducerDefaultState, action) =>{
    switch(action.type){
        case "CHANGE_ARRAY":
            // 直接返回新数组
            return [...action.array]
        default:
            return state
    }
}

组件直接读取对应reducer的状态即可触发更新。

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