Redux 更新嵌套状态数组答案

【问题标题】：Redux update nested state arrayRedux 更新嵌套状态数组
【发布时间】：2017-04-30 15:30:50
【问题描述】：

您好，我有两个关于 redux 的问题想问

如何更新嵌套在对象内部数组中的对象，示例如下

newInStockList:{
    newEntry:[
        0:{
            id:"584f9b926f69ee93d4eb320d",
            name:"apple",
            amount:"10"
        }, 
        1:{
            id:"584f9b926f69ee93d4eb31e5",
            name:"orange",
            amount:"20"  <-------- target
        }, 
    ]
}

我想要更新的目标是橙色的数量，因为我已经为它创建了一个 reducer，reducer 还包含更多操作

export var newInStockList = (state = {newEntry:[]}, action)=>{
    switch (action.type){
        case 'INSERT_NEW_ITEM_TO_INSTOCK_LIST':
            return {
                newEntry:[...state.newEntry, action.item]
            };
        case 'REMOVE_ITEM_FROM_INSTOCK_LIST':
            return {
                newEntry:[
                    ...state.newEntry.slice(0, action.targetItemIndex),
                    ...state.newEntry.slice(action.targetItemIndex + 1)
                ]
            }
        case 'EDIT_ITEM_FROM_INSTOCK_LIST':
            return {
                newEntry:[
                    ...state.newEntry,
                    state.newEntry[action.targetItemIndex]:{      <----problem
                        amount:action.amount                      <----problem
                    }                                             <----problem
                ]
            }
        default:
            return state;
    }
}

如果我想将橙色的数量从 20 更新为 30，我在这个减速器中做错了什么？因为我的减速器的输出只会将相同的项目（橙色）再次复制到数组中。我缺少什么会导致这个错误的关键概念？

第二个问题是reducer的状态，如果newInStockList里面只有一项，是否需要newEntry对象？如果没有必要，我该如何删除它以及它如何影响我的其余代码？我尝试删除所有带括号的 newEntry，但它在 action.item 上出现错误

非常感谢您的帮助：D

【问题讨论】：

Remove element from nested redux state的可能重复

标签： nested redux react-redux

【解决方案1】：

在做了更多研究后，我意识到 How to update single value inside specific array item in redux 通过使用不变性帮助（https://facebook.github.io/react/docs/update.html），线程遇到了与我类似的问题

代码更新：

     import update from 'react-addons-update'; 

     export var newInStockList = (state = {newEntry:[]}, action)=>{
        switch (action.type){
            case 'INSERT_NEW_ITEM_TO_INSTOCK_LIST':
                return {
                    newEntry:[...state.newEntry, action.item]
                };
            case 'REMOVE_ITEM_FROM_INSTOCK_LIST':
                return {
                    newEntry:[
                        ...state.newEntry.slice(0, action.targetItemIndex),
                        ...state.newEntry.slice(action.targetItemIndex + 1)
                    ]
                }
            case 'EDIT_ITEM_FROM_INSTOCK_LIST':
                return update(state,{
                    newEntry:{
                        [action.targetItemIndex]:{
                            amount:{$set : action.amount}
                        }
                    }
                })
            default:
                return state;
        }
    }

【讨论】：