Reactjs 在reducer中将对象添加到初始状态

我有我的初始状态：

export default function DrinkCalculator(state = initialState, action) {

  let payload = action.payload;
  switch (action.type) {
    case UPDATE_DRINKS_CALCULATOR:
    return [{
        ...state,
        ...payload
    }];
case ADD_DRINK:
  let newState= [Object.assign({},state)];
newState.push(action.payload);
return newState;

如何添加到数组中以保存对象数组？我需要如何更改我的reducer以将对象添加到数组中，这样我就可以存储很多条目而不是一个条目

我希望我的状态是：

[{
  drinkType: 5,
  drinkVolume: 4,
  drinkStrength: 5,
  drinkQuantity: 5,
  drinkStength: 5
},
{
  drinkType: 1,
  drinkVolume: 2,
  drinkStrength: 2,
  drinkQuantity: 5,
  drinkStength: 7
},
{
  drinkType: 3,
  drinkVolume: 5,
  drinkStrength: 2,
  drinkQuantity: 5,
  drinkStength: 5
},
{
  drinkType: 5,
  drinkVolume: 5,
  drinkStrength: 5,
  drinkQuantity: 5,
  drinkStength: 5
}
]

更新：我正在将嵌套对象复制到我的状态，我希望获取顶级属性并将它们作为对象添加到数组中

当我在这里启动操作时：

onClick() {
const drinkQuantity = this.state.counter;

const drinks = this.props.DrinksCalculator;

if (!drinkQuantity) {
    this.props.dispatch(showError());
} else {
    this.props.dispatch(updateDrinksCalculator({drinkQuantity}));
// fire addDrink to copy drinks props in new object
    this.props.dispatch(addDrink( drinks ));

    this.props.router.push('/calc/5');
}
}

---

如果我理解正确，您希望为您的状态添加一个新属性

const initialState = {
  drinkType: null,
  drinkVolume: null,
  drinkStrength: null,
  drinkQuantity: null,
  drinkStength: null
};
const someReducer=(state=initialState,action) => {
  switch (action.type) {
  case "SOME_ACTION":{
    let newState= Object.assign({},state,{newAttribute:["value1","value2"]});
    return newState;
  }
}

这将创建一个包含newAttribute属性的状态

就我个人而言，我喜欢列出我将在initialState中使用的所有属性。它使人们更容易阅读您的代码，了解他们将要使用的属性以及其中的数据

将对象推入数组的另一个示例

dispatch({
  type:"ADD_QUESTIONS",
  question:{
    drinkType: 5,
    drinkVolume: 4,
    drinkStrength: 5,
    drinkQuantity: 5,
    drinkStength: 5
  }
})

const initialState = {
  questions:[]
};

const someReducer=(state=initialState,action) => {
  switch (action.type) {
  case "ADD_QUESTIONS":{
    let newState= Object.assign({},state);
    newState.questions.push(action.question);
    return newState;
  }
}

---

initialState

不应更改，如果您需要不同的结构，那么可以将

initialState

更改为默认的数组结构，或者使用不同的缩减器。我的意思是，默认情况下，更新的问题是

action.payload

的值[{1:2,1:2}，{1:2,1:2，}，{1:2,1:2}，{1:2}]？如果是这样，那么您应该执行

返回[…state，…action.payload]

谢谢，我已经更新了我的答案，我需要一个对象数组，因此我可以将它们映射到一个表并显示数据。您是否多次调用aysnc函数，并且每次都要将其添加到reducer中的对象列表中？我有一个reducer，用于维护点击式问卷的状态，当它完成时，它将完成的状态推送到一个数组中。我将进行编辑以反映它对您的影响