Estoy luchando por entender Redux y estoy perdiendo un estado local al presionar un botón en una página de React. La situación es la siguiente:
Suponga que está en una página de React, que tiene un estado local:
{"player": "PersonA"}También hay un botón en la misma página de React. Presionar el botón desencadena una acción Redux. El método del controlador asociado devuelve:
return res.status(200).json({ statusCode: 200, success: true, payment: {"amount": "3", "currency": "EUR"}, });Y el reductor:
case APPLY_SUCCESS: console.log(...state); // returns undefined return { ...state, paymentData: action.payload.payment }; Después de presionar el botón en la página Reaccionar, el estado local solo contiene paymentData . Así que el player se ha ido del estado local. Pensé que ...state en el reductor debería garantizar el mantenimiento del estado local existente que no se ve afectado por la acción. Por lo tanto, simplemente paymentData los datos de pago al estado local y también mantendría player .
Mi pregunta:
...state en el reductor garantiza que el estado local que no se ve afectado por la acción sigue siendo parte del estado local?...state no está definido? ¿Cómo puedo asegurarme de que el player sigue siendo parte del estado local?console.log(...state) podría arrojar un error de tipo, porque la distribución generalmente se realiza dentro de matrices y objetos.
Sin embargo, la segunda parte en la que devuelve {...state, paymentData: data} debería funcionar como espera, con solo cambios de estado de datos de pago, ya que {...state} simplemente está haciendo una copia superficial del objeto de estado (no deep), y luego reemplazar la clave de datos de pago en esta copia.
Si está trabajando con una clave profundamente anidada, buscaría en la función deepClone de lodash para crear una copia profunda del estado, y no una copia superficial, para evitar escribir directamente en el estado redux (y crear errores inesperados)
Recomendación:
Compruebe si console.log(state) no está definido o es un objeto vacío.
Si ese es el caso, el estado no se pasa al reductor, o no se inicializa correctamente, y debe verificar cómo se pasa.
Asegúrese de que el reductor siga este modelo para inicializarlo correctamente. Esto está tomado de los propios documentos de redux y puede ver más ejemplos allí.
const initialState = { todos: [ { id: 0, text: 'Learn React', completed: true }, { id: 1, text: 'Learn Redux', completed: false, color: 'purple' }, { id: 2, text: 'Build something fun!', completed: false, color: 'blue' } ], filters: { status: 'All', colors: [] } } // Use the initialState as a default value export default function appReducer(state = initialState, action) { // The reducer normally looks at the action type field to decide what happens switch (action.type) { // Do something here based on the different types of actions default: // If this reducer doesn't recognize the action type, or doesn't // care about this specific action, return the existing state unchanged return state } }