Si tiene un estado de carga útil de objetos:
export const initialState = { payload: { firstName: 'Mick', lastName: 'Andri', phoneNumber: '651-332-5675', electronicMailAddress: 'mandradi@lake.com', addressLine1: '27 Crest Ave', addressLine2: '', cityName: 'San Jose', stateCode: 'CA', zipCode: '92122', }, };y para cargar este estado de alguna manera yo uso immer:
const SettingsReducer = (state = initialState, action) => produce(state, (draft) => { switch (action.type) { case actionTypes.LOAD_SETTINGS_INFO: draft.payload = action.payload; break; } }); export default SettingsReducer;Si tuviéramos que hacer esto de la manera habitual con el objeto de JavaScript y la sintaxis de distribución de matriz, nuestro reductor de estado podría verse como a continuación, este es solo un ejemplo:
draft.payload = action.payload; case 'UPDATE_SETTINGS_INFO': return { ...state, payload: [...state.payload, action.payload], };En mi caso:
Recibo todos los campos a través del formulario de gancho de reacción e intento actualizar mi estado. Necesito actualizar el estado sin perder todos los datos.
El siguiente código funciona pero elimina el resto de los datos del estado.
case actionTypes.UPDATE_SETTINGS_INFO: draft.payload = action.payload; break;Necesito actualizar la mitad del estado a la vez.
¿Cuál es la mejor manera de clonar el estado sin perder todos los datos?
Primero, recomendaría no tener un campo state.payload . "Carga útil" se usa normalmente para describir "el contenido de un objeto de acción", y como término realmente no tiene sentido para el estado en un reductor.
En segundo lugar, parece que lo que está tratando de hacer aquí es fusionar dos objetos, de modo que los campos en el segundo anulen los campos en el primero. Si estuviéramos haciendo una actualización inmutable (y asumiendo que el state en sí son los datos originales), podríamos return {...state, ...action.payload} .
Con Immer, puedes "mutar" el objeto directamente:
state.a = action.payload.a; state.b = action.payload.b; // etc Si hay varios campos que desea actualizar a la vez y action.payload contendrá algunos o todos los campos en el estado original, puede hacerlo con Immer:
// Object.assign always mutates its first argument Object.assign(state, action.payload); Finalmente, recomendaría específicamente usar nuestro paquete oficial Redux Toolkit, que ya usa Immer dentro de su API createSlice :
const settingsSlice = createSlice({ name: 'settings', initialState, reducers: { settingsLoaded(state, action) { Object.assign(state, action.payload) } } });Consulte los tutoriales de Redux para obtener más detalles:
Hizo un objeto de carga útil dentro de su objeto de estado inicial, por lo que al usar la configuración de Markerikson, si cambia alguna de las configuraciones, creo que se reemplazará todo el objeto de carga útil. Su estado inicial debe ser:
export const initialState = { firstName: 'Mick', lastName: 'Andri', phoneNumber: '651-332-5675', electronicMailAddress: 'mandradi@lake.com', addressLine1: '27 Crest Ave', addressLine2: '', cityName: 'San Jose', stateCode: 'CA', zipCode: '92122', };Entonces debería poder cambiar cualquiera de las configuraciones individuales en ese objeto initialState usando:
dispatch(settingsLoaded(changedState))
y como ejemplo:
const changedState = { cityName: 'Bozeman', stateCode: 'MT', zipCode: '94565', }y persistirán sus cambios junto con todo lo que no cambió, si entiendo su pregunta correctamente.
Esta solución funciona para mí.
case actionTypes.UPDATE_SETTINGS_INFO_FAILURE: draft.errorMessages = [...action.payload]; break;