如何在Redux Store Slice中修改数组中的单个元素

问题根源 #

1. Reducer参数误用：Redux Toolkit中reducer的第二个参数是action对象，你直接把它当成了传入的location数据，导致location.index实际取的是action对象的index属性（不存在），自然无法定位到数组元素。
2. 初始状态未判空：初始state.locations为null，如果未先调用set初始化数组就执行setLocation，会直接触发空指针错误。
3. 代理对象是正常现象：打印state.locations看到的代理对象是Immer的内部实现，Redux Toolkit依赖Immer实现"可变语法写不可变更新"的效果，属于正常情况，无需额外处理。

修复后的Slice代码 #

import { createSlice } from '@reduxjs/toolkit'

export const locationsSlice = createSlice({
    name: 'locations',
    initialState: {
        locations: null,
    },
    reducers: {
        set: (state, action) => {
            // 规范写法：通过action.payload获取传入的数组
            state.locations = action.payload
        },
        setLocation: (state, action) => {
            // 先判断数组是否已初始化，避免空指针错误
            if (!state.locations) return
            
            const targetLocation = action.payload
            // 替换数组中对应下标的元素
            state.locations[targetLocation.index] = targetLocation
            // 如果只需要更新部分字段，也可以用展开语法合并原有数据：
            // state.locations[targetLocation.index] = {
            //   ...state.locations[targetLocation.index],
            //   ...targetLocation
            // }
        }
    },
})

export const { set, setLocation } = locationsSlice.actions
export default locationsSlice.reducer

正确调用方式 #

// 先初始化数组
set([{name: '1', index: 0}, {name: '2', index: 1}])

// 修改单个元素
setLocation({name: 'updated-1', index: 0})

关键说明 #

• 所有reducer的第二个参数都是action对象，必须通过action.payload获取传入的数据，这是Redux的标准规范。
• Immer代理对象无需手动转换，它会自动将你对state的"可变"修改，转换成符合Redux要求的不可变更新。

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