如何在Redux中使用扩展操作符获取数组内部和对象的旧状态

Question

我试图获得我的productData[]与传播操作符的旧状态，但这个数组是在对象内部。我必须保持旧的状态，因为我需要保持我的产品实际上处于状态，并在Redux中添加新产品。我试试这个:

case 'ADD_TO_COMPARE':
return {
productData:[...state.productData,action.payload],
open:true,                    
}

但没有工作，这是我放在这里的最后一个产品。

以下是我在Redux上的reducer代码:

const initialValue = {
productData:[],
open:false

}
export const compareReducer = (state = initialValue, action) => {
switch (action.type) {
case 'ADD_TO_COMPARE':
return {
productData:[...state.productData,action.payload],
open:true,                    
}
case 'REMOVE_FROM_COMPARE':
return initialValue 
default:
return state
}
}

我的控制台:第一个产品是硬代码添加的，当添加第三个产品时，总是覆盖状态

中添加的最后一个产品

Answer 1

我看不出合并productData的方式有什么明显的问题。我怀疑state.productData在进入时是空的，或者action.type不匹配。

从语法上讲，你所做的工作是有效的:

// old state
const state = {
productData: [{id: 1}, {id: 2}],
otherStuff: 'bananas and wookies'
}
// action
const action = {
payload: [{id: 3}, {id: 4}]
}
const merged = { // new object literal
...state, // keep old state properties
productData: [ // overwrite the 'productData' from state with
...state.productData, // the previous state's product data
...action.payload // and the action's payload
]};
console.log(merged);
/*
{
"productData": [
{ "id": 1 }, <-- original state
{ "id": 2 },
{ "id": 3 }, <-- action payload
{ "id": 4 }
],
"otherStuff": "bananas and wookies" <-- original state
}
*/