comment changer la valeur d'un objet spécifique au lieu d'écraser l'intégralité de l'objet dans redux ?

Je travaille sur une application dans reactNative où j'ai besoin de stocker un objet dans le stockage redux. Je veux pouvoir éditer cet objet et l'afficher dans le front-end. J'ai un compteur fonctionnel qui le fait, mais lorsque je l'essaie avec un objet, il écrase l'objet entier sur l'élément modifié. Comment puis-je modifier uniquement cet élément spécifique et conserver tous les autres éléments de l'objet non affectés ?

dans ce cas, je veux principalement me concentrer sur l'action setBaseDisarmed

Mes actions:

export const increment = () => ({
 type: INCREMENT,
});
export const decrement = () => ({
 type: DECREMENT,
});
export const reset = () => ({
 type: RESET,
});
 
export const setBase = () => ({
 type: SET_BASE,
});
export const setBaseArmed = () => ({
 type: SET_BASE_ARMED,
 id: 1,
 payload: { state: 'armed' },
});
export const setBaseDisarmed = () => ({
 type: SET_BASE_DISARMED,
 id: 1,
 payload: { base: { state: 'disarmed' } },
});

Mon réducteur:

const rootReducer = (state = initialState, action) => {
 switch (action.type) {
 case INCREMENT:
 return {
...state,
 counter: state.counter + 1,
 };
 case DECREMENT:
 return {
...state,
 counter: state.counter - 1,
 };
 case RESET:
 return {
...state,
 counter: 0,
 };
 case SET_BASE:
 return {
...state,
 id: 1,
 title: 'Title Name',
 state: 'armed',
 created_at: '2022-03-10T12:24:14.000000Z',
 updated_at: '2022-04-11T07:42:34.000000Z',
 };
 case SET_BASE_ARMED:
 return {
...state,
...action.payload,
 };
 case SET_BASE_DISARMED:
 return {
...state,
...action.payload,
 };
 case SET_BASE_HOME:
 return {
...state,
 state: 'home',
 };
 default:
 return state;
 }
};

L'état original:

base: "[{\"id\":1,\"title\":\"Title Name\",\"state\":\"armed\",\"created_at\":\"2022-03-10T12:24:14.000000Z\",\"updated_at\":\"2022-04-11T07:42:34.000000Z\"}]"
counter: "0"

Ce que fait setBaseDisarmed dans le stockage redux :

base: "{\"state\":\"disarmed\"}"

Ce que je veux qu'il fasse:

base: "[{\"id\":1,\"title\":\"Title Name\",\"state\":\"disarmed\",\"created_at\":\"2022-03-10T12:24:14.000000Z\",\"updated_at\":\"2022-04-11T07:42:34.000000Z\"}]"
counter: "0"

J'apprécie grandement tous les conseils et l'aide. Merci de l'avoir examiné avec moi.

Solution du problème

Concernant le sujet; Dans votre cas, vous essayez de faire quelque chose comme ça.

let base = { base: [{id: 1, state: 'armed'}, {id: 2, state: 'disarmed'}] }
let addition = { base: { state: 'disarmed' } }
let newBase = {
...base,
...addition,
}
// newBase = { base: { state: 'disarmed' } } 

1- Vous conservez une liste d'objets sur Redux.

2- Vous souhaitez modifier une zone précise d'un objet de la liste.

Étape 1: Modifiez cette fonction.

export const setBaseArmed = () => ({
 type: SET_BASE_ARMED,
 payload: { id: 1, state: 'armed' },
});

Étape 2 : Apportons des modifications au réducteur.

case SET_BASE_ARMED:
 // We find the targeted item from the list.
 let targetIndex = state.base.findIndex(item => item.id === action.payload.id)
 // We are adding it to the valuable object we sent above.
 let targetObject = {...state.base[targetIndex ],...action.payload}
 // And we put our updated object back in its place in the list.
 return {
...state,
 base: [...state.base.slice(0, targetIndex), targetObject,...state.base.slice(targetIndex+ 1)]
 };

On fait presque quelque chose comme ça.

let base = [{id: 1, state: 'armed', title: 'Title 1'}, {id: 2, state: 'disarmed', title: 'Title 2'}]
let payload = {id: 1, state: 'disarmed'}
let targetIndex = base.findIndex(item => item.id === payload.id)
let targetObject = {...base[targetIndex],...payload}
let newBase = [...base.slice(0, targetIndex), targetObject,...base.slice(targetIndex+ 1)]
console.log('Default Base:', base)
console.log('New Base:', newBase)