添加對象初始狀態減速

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