Imaginemos un simple reductor:
const [state, setState] = React.useReducer(myReducer, {}) Y myReducer con un solo caso (versión simplificada):
const myReducer = (state, action) => { switch (action.type) { case 'UPDATE_STATE': { // Code to update here... } } }Ahora, cuál de las siguientes afirmaciones es la más adecuada para actualizar un estado y por qué:
NOTA: payload = state .
MÉTODO 1
case 'UPDATE_STATE': { const updatedState = action.payload updatedState.object = true return updatedState }MÉTODO 2
case 'UPDATE_STATE': { const updatedState = action.payload updatedState.object= true return { ...state, updatedState } }MÉTODO 3
case 'UPDATE_STATE': { const updatedState = action.payload updatedState.object= true return { ...state, ...updatedState } }MÉTODO 4
case 'UPDATE_STATE': { return ({ ...state, object: true }) }Creo que deberías usar el método 4. No estás mutando el estado aquí, que es la forma de Reaccionar.
case 'UPDATE_STATE': { return ({ ...state, object: true }) } Nota: Operador de propagación ... crea diferentes referencias hasta un solo nivel.
EDITAR: Según los comentarios, aquí hay un ejemplo simple de cómo podría estar mutando el estado, incluso con los objetos más simples si no está usando ... .
let state = { object : true}; let payload = state; state.object = false; console.log(state); console.log(payload); Incluso con ... es posible que tenga objetos profundamente anidados. Tendrán el mismo problema, a menos que quieras extenderte en todos los niveles. Hay bibliotecas para ayudarte con objetos profundos como immutable.js.