如何让Redux的Reducer将对象设为数组索引0的元素？

点击按钮执行Dispatch(ADDS(myObject))传递对象时，Reducer未将该对象设为product数组的索引0元素，反而返回空的首个元素。已知初始状态中product被设为空数组，请问如何让该对象成为数组索引0的元素？

控制台日志

控制台日志显示product数组首个元素为空

我的代码（UI.js）

import { createSlice } from '@reduxjs/toolkit';

export const slice = createSlice({
    name: 'initial',
    
    initialState : {
        product: [],
    },
    
    reducers: {
        ADDS(state, actions) {
            return {
                ...state, 
                product: actions.payload,
            } 
        }
    }
});

export const { ADDS } = slice.actions;

export default slice.reducer;

问题出在ADDS reducer的赋值逻辑上：你直接将actions.payload赋值给了product，如果myObject是单个对象而非数组，会把原本的数组替换成对象，导致后续数组操作异常。要让对象成为数组的索引0元素，需要把单个对象包装成数组：

修改后的ADDS方法：

ADDS(state, actions) {
    return {
        ...state, 
        product: [actions.payload], // 将传递的单个对象包装为数组，使其成为索引0的元素
    } 
}

如果需要保留原有数组元素，同时把新对象放到数组开头，可以用数组解构实现：

ADDS(state, actions) {
    return {
        ...state, 
        product: [actions.payload, ...state.product], // 新对象置于索引0，原有元素依次后移
    } 
}

这样就能确保product始终是数组结构，且传递的对象成为数组的索引0元素。

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