使用Object.assign正確地返回嵌套狀態

Question

我正在處理React/Redux應用程序，並且大部分情況下，一切都一直順利進行。

從本質上講，它是具有內置的。

我無法在我的減速器中正確返回全部現有的狀態下，當用戶添加一個類別裏面待完成項目分類待辦事項應用程序。

了Redux狀態之前，我派遣行動方法add_item看起來是這樣的：

{ 
items: { 
    "HOME": [["Do laundry", "High Priority"],["Feed kids", "Low priority"] ], 
    "WORK": [["Get promotion", "High priority"],["Finish project", "Medium priority"] ], 
    "BOTH": [["Eat better", "Medium priority"],["Go for a run", "High priority"] ], 

}, 
settings: { 
    Test: "test" 
} 
} 

用戶導航到一個類別（預製作，還沒有實現創建它們還），可以創建一個新的todo-具有名稱和優先級的項目。這將調度一個返回數組的類型，如[category，name，priority]。

目前在我的減速器中，我已經在它成功添加項目的地方，但它正在清空/覆蓋所有現有的類別。

我的減速器是這樣的：

case types.ADD_ITEM: 
let cat = action.payload[0]; 
let name = action.payload[1]; 
let priority = action.payload[2]; 
return Object.assign({}, state, { items: { [cat]: [...state.items[cat], [name, priority]]}}); 

我試圖創建一個新的對象首先與所有的合併項目，像這樣：

let combinedItems = Object.assign({}, state.items, { [cat]: [...state.items[cat], action.payload] }); 

如果我CONSOLE.LOG上述combinedItems，我得到我想要項目的確切對象。但是，我正在努力讓減速器返回的最終對象反映這一點。

當我嘗試像下面這樣的東西時，我得到一個包含combinedItems的對象作爲項目中的單獨鍵。

 return Object.assign({}, state, { items: { combinedItems, [cat]: [...state.items[cat], [name, priority]]}}); 

任何人都可以幫助我得到我的最終REDX狀態來包含所有現有的類別/項目+用戶添加一個？我真的很感謝幫助。

Answer 1

我認爲你應該在你有數組的地方使用對象。在你的行動有效載荷，而不是，：

[category, name, priority] 

您可以：

{category, name, priority} 
action.payload.category 

我會讓你的待辦事項相同的變化。相反的：

[["Eat better", "Medium priority"], ... ] 

您可以：

[{ name: "Eat better", priority: "Medium" }, ... ] 

現在它是否是更好地使items與種類鍵的對象，或者是知道它的類別項目的數組方面......我好認爲後者更好，這樣如果你得到一個單一的項目，你不需要去它的父母找出它屬於哪個類別。這也會讓你的問題更易於管理。

items: [ 
    { 
    name: "Eat better", 
    priority: "Medium", 
    category: "Both" 
    }, ... 
] 

把所有這一切共同解決您的問題：

case types.ADD_ITEM: 
    let newItem = { 
    name: action.payload.name, 
    priority: action.payload.priority, 
    category: action.payload.category 
    } 
    return Object.assign({}, state, { items: [ ...state.items, newItem ] }) 

無論你受益與類別，鍵之前必須是微不足道重現這種結構。

獲取在HOME類別中的所有項目：

this.props.items.filter(item => item.category === 'HOME')