如何根据 ID 在我的 reducer 中添加数据

Question

我正在使用 ReactJS 和 Redux，我想将我的数据添加到我的 reducer 中，但是以这种方式：当我收到我的 action.payload 时：它包含 ID 和数据属性，目标是创建（如果不存在）具有 ID 值的属性并将数据放入属性进入.

示例：当有效负载为 {111, {name: 'test',age : 25}} 时，它应该在我的减速器中创建（如果不存在）一个属性，如下所示：

MyReducer : {
    clientData : {
       111 : {name : 'test', age : 25}
}
}

如果我想添加另一个负载：{2222, {name :'toto' : age : 30}} 结果应该是这样的：

MyReducer : {
    clientData : {
       111 : {name : 'test', age : 25},
       2222  : {name : 'toto', age : 30}
}
}

如果 id 存在于我的 reducer 中，它应该用新的 action.payload.data 值替换数据。

我已经试过了：

case 'ADD_CLIENT_DATA_SUCCESS':
            const { id, record } = action.payload;
            console.log(action.payload);
            return {
                ...state,
                loading: false,
                clientData: {
                    ...state.clientData,
                    id: record,
                },
            };

但是把id作为静态变量，结果是这样的：

知道如何实现吗？谢谢

编辑：我已经编辑了我的代码，但是对于输入的新数据，它没有呈现为对象数组.. 这是我的代码：

case 'ADD_CLIENT_DATA_SUCCESS':
            const { id, record } = action.payload;
            console.log(state.clientData[id]);
            return {
                ...state,
                loading: false,
                clientData: {
                    ...state.clientData,
                    [id]: [state?.clientData[id] || null, record],
                },
            };

将 NEWDATA 添加到我的减速器中的现有 ID 时的预期结果：:

MyReducer : {
    clientData : {
       111 : {name : 'test', age : 25},
       2222  : [{name : 'toto', age : 30}, {name : 'NEWDATA', age : 40}]
}
}

Answer 1

将 id 放入 [] 以使用动态变量而不是字符串 id :

         ...state,
   loading: false,
                clientData: {
                    ...state.clientData,
                    [id]: record,
                },
            };

Answer 2

您需要使用 id 变量作为键，因此您需要用 []

包装它

   case 'ADD_CLIENT_DATA_SUCCESS':
        const { id, record } = action.payload;
        console.log(action.payload);
        return {
            ...state,
            loading: false,
            clientData: {
                ...state.clientData,
                [id]: record,
            },
        };

阅读Computed property names了解更多信息

如何根据 ID 在我的 reducer 中添加数据

How to add data in my reducer based on ID

reactjs

redux

react-redux