Inicialmente tenía mi reductor como tal, y no funciona (mi estado redux actualizado no hace que mi componente se actualice, el accesorio 'RecipeStore' de mi componente está asignado a la propiedad 'myRecipes' del estado redux)
const initialState={ myRecipes: [] } export default function(state=initialState, action){ switch(action.type){ case SUBMIT_RECIPE: const newState={...state} newState.myRecipes.push(action.payload) return newState default: return state;}}
Me di cuenta de que mi componente no se volvió a renderizar con la actualización de la tienda redux porque muté el estado, y nunca deberías mutar el estado. Así que reescribí el reductor como tal:
const initialState={ myRecipes: [] } export default function(state=initialState, action){ switch(action.type){ case SUBMIT_RECIPE: console.log("reducer invoked") const copyState={...state, myRecipes:state.myRecipes.concat(action.payload)} return copyState default: return state; } }
Y esta vez funcionó: mi componente se actualiza cada vez que cambia la tienda redux. Sin embargo, mi reductor original también creó una copia del estado original usando el operador de propagación y solo mutó la copia, ¿por qué no funciona?
Esta es una de esas situaciones en las que me alegro de haber resuelto el problema, pero estoy molesto porque no sé por qué.
¿Alguien puede prestarme su pensamiento?