添加对象初始状态减速

Question

我有我的初始状态：

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'); 
} 
} 

Answer 1

如果我理解你的权利，你想一个新的属性添加到您的状态。

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; 
    } 
}