Intento actualizar mi estado global usando Redux, pero trato de actualizar solo un parámetro de cinco, no todos.
El código de mi tienda se ve así:
const initialState = { loggedIn: false, thisUser: {} } export function usersReducer(state = initialState, action) { switch (action.type) { case 'users/loggedIn': return { ...state, loggedIn: action.payload } case 'users/addUser': return { ...state, thisUser: action.payload } default: return state } }Traté de escribir un nuevo caso como, pero no funciona:
case 'users/setActivated': return { ...state, thisUser.activated: action.payload }VS Code no me deja escribir eso ".activado"
Mi envío se parece a:
dispatch({ type: 'users/setActivated', payload: 1 })¿Qué está mal?
Bueno, tu sintaxis es incorrecta, eso es. :)
case 'users/setActivated': return { ...state, thisUser: {...state.thisUser, activated: action.payload} } es lo que necesita para un state de fusión superficial con un objeto anidado de fusión superficial.
Tenga en cuenta que rápidamente se vuelve muy viejo excavar en objetos como ese, y es posible que desee ver, por ejemplo, immer .
Entiendo por qué hiciste esto, te parecía lógico, pero no funcionará.
const state = { ...state, [thisUser.activated]: action.payload };Entonces, su objetivo es actualizar el estado para que sea así:
{ loggedIn: true, thisUser: { //other properties , activated: 1, } }En primer lugar, este es el resultado de lo que hiciste:
{ loggedIn: true, thisUser: { //other properties , activated: 0, }, activated: 1, }; En segundo lugar, JavaScript no acepta este thisUser.activated como clave.
La solución:
{ ...state, thisUser: { ...state.thisUser, activated: action.payload }, };