Reactjs Redux Reducer-将新数据添加到嵌套状态

我已经在reducer中以客户机状态保存了以下json文件。现在，当我通过ajax添加新注释时，我将调用new_NOTE_SUCCESS reducer，它将新注释添加到现有注释数组中

export default function clientProfile(state={}, action) {

    switch(action.type) {


        case NEW_NOTE_SUCCESS:
            console.log(action.payload);
            return { ...state, notes: [...state.notes, action.payload] }

        default:
            return state;
    }

}

但是，在我完成上述操作之后，this.props.client.notes将只包含我添加的新注释，而不包含旧注释

我应该如何将新注释“推送”到数组中，这样我就不需要每次添加新注释时都重新发送notes json文件

PS:action.payload包含以下json

{
            "noteId": "10000000",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510316194",
            "note": "ADDED A NEW NOTE. NEED TO ADD TO STATE"
        }

这是初始加载时的原始json文件

{
    "customerId": "34",
    "agentId": "1",
    "createdDate": "1510223892",
    "firstname": "John",
    "lastname": "Doe",
    "mobile": "123456789",
    "address": "Something email here",
    "notes": {
        "0": {
            "noteId": "1",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510316194",
            "note": "add something"
        },
        "1": {
            "noteId": "2",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510316527",
            "note": "add something"
        },
        "2": {
            "noteId": "3",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510317177",
            "note": "add new thing"
        },
        "3": {
            "noteId": "4",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510318448",
            "note": "something"
        },
        "4": {
            "noteId": "5",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510318476",
            "note": "this would be note number 5, lets see whether we can get something from this."
        }
    }
}

更新：Reducer代码-对象而不是数组

case NEW_NOTE_COMPLETE:
    return { ...state, notes: {...state.notes, action.payload.noteId: action.payload} }

---

在我看来，您的数据结构变得复杂。
在json文件中，

note

键是一个

对象

，但在reducer中，您将其作为一个

数组处理

所以这一行：

return { ...state, notes: [...state.notes, action.payload] }

应该更像这样（我刚刚硬编码了键
5
您应该以某种方式使其动态计算）：

编辑

作为您评论的后续内容：

但是，你如何使它动态计算，它似乎不让
让我使用一个变量

假设您想使用
noteId
作为密钥，则可以使用

我更新了代码片段以进行说明

下面是一个小的运行示例：


const jsonObj={
“客户ID”：“34”，
“agentId”：“1”，
“createdDate”：“1510223892”，
“名字”：“约翰”，
“姓氏”：“能源部”，
“手机”：“123456789”，
“地址”：“此处有邮件”，
“说明”：{
"0": {
“noteId”：“1”，
“客户ID”：“34”，
“createdBy”：“1”，
“已创建”：“1510316194”，
“注意”：“添加内容”
},
"1": {
“noteId”：“2”，
“客户ID”：“34”，
“createdBy”：“1”，
“已创建”：“1510316527”，
“注意”：“添加内容”
},
"2": {
“noteId”：“3”，
“客户ID”：“34”，
“createdBy”：“1”，
“已创建”：“1510317177”，
“注意”：“添加新事物”
},
"3": {
“noteId”：“4”，
“客户ID”：“34”，
“createdBy”：“1”，
“已创建”：“1510318448”，
“注意”：“某物”
},
"4": {
“noteId”：“5”，
“客户ID”：“34”，
“createdBy”：“1”，
“已创建”：“1510318476”，
“注意”：“这将是第5个注意事项，让我们看看是否可以从中得到一些东西。”
}
}
}
常数newNote={
“noteId”：“10000000”，
“客户ID”：“34”，
“createdBy”：“1”，
“已创建”：“1510316194”，
“备注”：“已添加新备注。需要添加到状态”
}
常量动作={
键入：“新建注释成功”，
有效载荷：newNote
};
函数clientProfile（状态={}，操作）{
开关（动作类型）{
案例“新注释成功”：
{
返回{…state，notes:{…state.notes[action.payload.noteId]：action.payload
}
}
}
违约：
返回状态；
}
}
让reducer=clientProfile（jsonObj，{type:''}）；
console.log（“更改前”，reducer.notes）
reducer=clientProfile（jsonObj，action）；
console.log（“更改后”，reducer.notes）
当您收到一张带有
3
键的便笺，并且您已经收到一张带有该键的便笺时，会发生什么？您需要覆盖它还是更改新便笺的键？只有便笺ID是唯一的，所以我只是将其推入数组键5，例如，在我看来，您得到的是混合数据结构。您可以看到，在json文件中，notes是一个对象，但在reducer中，它是一个数组。我希望看到这一行
notes:{…state.notes，“someKey”：action.payload}
而不是这一行
notes:[…state.notes，action.payload]
谢谢@Sag1v。因此，我在服务器端进行了更改，使数组键成为noteId。因此，当我按下新音符时，“someKey”将是我的payload.noteId。但是它返回了意外的令牌error.action.payload.noteId非常感谢您，但是您如何使其动态计算，它似乎不允许我使用变量。我想使用action.payload.noteId作为键，我甚至尝试了{action.paload.noteId}和${action.payload.noteId}如果您修复了数据结构问题，以避免像现在这样的将来的修补程序，效果会更好。有关更多信息，您可以在这里阅读redux author@SomeoneSpecial use computed property keys（我更新了答案），我正在查看您的数据结构链接。我已经测试了你的代码，它可以工作了！谢谢你今天教我新东西！
return {...state, notes: {...state.notes, "5": action.payload}}

[action.payload.noteId]: action.payload