Как добавить данные в мой редуктор на основе ID
Я использую ReactJS и Redux и хочу добавить свои данные в свой редуктор, но таким образом: когда я получаю свой action.payload : он содержит свойство ID и DATA, и цель состоит в том, чтобы создать (если не существует) свойство со значением идентификатора и поместить в него свойство данных.
Пример : Когда полезная нагрузка равна {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}
}
}И в случае, когда идентификатор существует в моем редюсере, он должен заменить данные новыми значениями action.payload.data.
Я пробовал это:
case 'ADD_CLIENT_DATA_SUCCESS':
const { id, record } = action.payload;
console.info(action.payload);
return {
...state,
loading: false,
clientData: {
...state.clientData,
id: record,
},
};Но он принимает id как статическую переменную, результат такой:
Любая идея, как этого добиться, пожалуйста? Спасибо
Обновлено: я отредактировал свой код, но для введенных новых данных он не отображается как массив объекта. Это мой код:
case 'ADD_CLIENT_DATA_SUCCESS':
const { id, record } = action.payload;
console.info(state.clientData[id]);
return {
...state,
loading: false,
clientData: {
...state.clientData,
[id]: [state?.clientData[id] || null, record],
},
};Ожидаемый результат при добавлении NEWDATA к существующему идентификатору в моем редукторе ::
MyReducer : {
clientData : {
111 : {name : 'test', age : 25},
2222 : [{name : 'toto', age : 30}, {name : 'NEWDATA', age : 40}]
}
}А что, если у меня есть массив вместо записи? как распространять старые данные и добавлять новые данные в
Ответы 2
поместите идентификатор в [], чтобы использовать динамическую переменную, а не идентификатор строки:
...state,
loading: false,
clientData: {
...state.clientData,
[id]: record,
},
};
А что, если у меня есть массив вместо записи? как распространять старые данные и добавлять новые данные в ?
очень легко : [...oldArray, newItemInArray]
Пожалуйста, взгляните на мой отредактированный пост, у меня возникла ошибка при попытке вашего решения.
Я действительно видел ваше обновление. Но я не уверен, что вы пытаетесь построить здесь. Вы имеете в виду, что ваши данные в clientData могут быть объектом или массивом объектов. Но может ли это быть одно или другое или может быть и то, и другое, я имею в виду, если у вас есть идентификатор id1, который является объектом, может ли он быть преобразован в массив в будущем или, поскольку он был создан как объект, он останется как это навсегда?
вам не хватает операторов распространения ` ... ` перед state?.clientData[id] , и если запись также является массивом, вам нужно поместить их перед записью: ``` clientData: { ...state.clientData, [id] : [...состояние?.clientData?.[id] , запись], } ```
Я пробовал ваш код, но он не работает... и это потому, что я не могу распространять объект... Моя цель - создать массив в каждом [id], и этот массив будет содержать все объекты, связанные с этим идентификатором. , Это мой новый код: case 'ADD_CLIENT_DATA_SUCCESS': const { id, record } = action.payload; console.info(state.clientData[id]); return { ...state, loading: false, clientData: { ...state.clientData, [id]: [...(state.clientData[id] || []), record], }, };
Да, потому что ваши clientData - это в первую очередь объект (что очень странно, сначала добавить один объект, который позже становится массивом этого объекта). Сначала вы должны иметь экземпляр clientData в виде пустого массива и всегда добавлять, заменяя его новым массивом, включая старый массив и новый элемент как `[...state.oldArray, payload.newItem]`
Вам нужно использовать переменную id в качестве ключа, поэтому вам нужно обернуть ее []
case 'ADD_CLIENT_DATA_SUCCESS':
const { id, record } = action.payload;
console.info(action.payload);
return {
...state,
loading: false,
clientData: {
...state.clientData,
[id]: record,
},
};
Прочтите Имена вычисляемых свойств для получения дополнительной информации
А что, если у меня есть массив вместо записи? как распространять старые данные и добавлять новые данные в ?
@Duchere вы могли бы использовать (предполагая, что record всегда новый) [id]: [...(state.clientData[id] || []), record]
Я получаю сообщение об ошибке «Uncaught TypeError: (clientData || []) не является итерируемым», поскольку clientData является объектом.
Вы пропустили часть [id]. Это clientData[id] || []
return { ...state, loading: false, clientData: { ...state.clientData, [id]: [...(state.clientData[id] || []), record], }, }; получаю ту же ошибку..
@Ducher, это происходит, потому что вы хотите, чтобы это было либо объектом, либо массивом. Это просто напрашивается на неприятности в будущем. Вы всегда должны хранить его в виде массива, и если он имеет только одну «запись», это должен быть массив с одной записью.
Любые идеи, как этого добиться, пожалуйста? Я пробую другие решения. return { ...state, loading: false, clientData: { ...state.clientData, [id]: [state.clientData[id], record].flat(2), }, };
@Duchere, как получается, что у некоторых id есть объект в качестве значения в состоянии? Код, который я разместил в комментарии, также должен обрабатывать первый случай, если вы не установили его где-либо еще.
Подсказка: используйте динамическое свойство для объектов (скобочная нотация).
clientData: {...state.clientData, [id]: record},