Question

我在reducer中以客户端状态保存了以下json文件。现在，当我通过ajax添加新的Notes时，我正在调用NEW_NOTE_SUCCESS减速器，这是为了将新音符添加到现有音符数组中。

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只会添加我添加的新注释，但不会添加旧注释。

我应该怎么做才能将新音符“推”到数组中，所以每次添加新音符时我都不需要重新发送音符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."
        }
    }
}

更新：减速器代码 - 对象而不是数组。

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

Answer 1

在我看来，您的数据结构变得混杂在您的json文件中，note键是object，但在您的reducer中，您将其作为array处理。
所以这一行：

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

应该更像这样（我只是对密钥5进行了硬编码，你应该以某种方式对其进行动态计算）：

return {...state, notes: {...state.notes, "5": action.payload}}

修改
作为评论的后续内容：

但你怎么做动态计算，似乎没有我使用变量

假设您想使用noteId作为密钥，那么您可以使用computed property names of es2015

[action.payload.noteId]: action.payload

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

这是一个小例子：

const jsonObj = { "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." } } } const newNote = { "noteId": "10000000", "customerId": "34", "createdBy": "1", "created": "1510316194", "note": "ADDED A NEW NOTE. NEED TO ADD TO STATE" } const action = { type: 'NEW_NOTE_SUCCESS', payload: newNote }; function clientProfile(state = {}, action) { switch (action.type) { case 'NEW_NOTE_SUCCESS': { return {...state, notes: {...state.notes, [action.payload.noteId]: action.payload } } } default: return state; } } let reducer = clientProfile(jsonObj, {type: ''}); console.log("before the change",reducer.notes) reducer = clientProfile(jsonObj, action); console.log("after the change",reducer.notes)

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

1 个答案: