He usado dos acciones creadas y sus respectivos reductores. Cuando envío una sola acción, los estados iniciales de ambas acciones se guardan en el estado donde se duplican los parámetros de los estados.
acciones/index.js
import { COUNTER_CHANGE, UPDATE_NAVIGATION } from "../constants"; export function changeCount(count) { return { type: COUNTER_CHANGE, payload: count, }; } export function updateNavigation(obj) { return { type: UPDATE_NAVIGATION, payload: obj, }; }reductores.js
import { COUNTER_CHANGE, UPDATE_NAVIGATION } from "../constants"; import logger from "redux-logger"; const initialState = { count: 0, navigation: {}, }; export const countReducer = (state = initialState, action) => { switch (action.type) { case COUNTER_CHANGE: return { ...state, count: action.payload, }; default: return state; } }; export const updateNavigation = (state = initialState, action) => { switch (action.type) { case UPDATE_NAVIGATION: return { ...state, navigation: action.payload, }; default: return state; } }; // export default countReducer;reductor/index.js
import { countReducer, updateNavigation } from "../reducers/countReducer"; import { combineReducers } from "redux"; const allReducers = combineReducers({ countReducer, updateNavigation, }); export default allReducers;Despacho de acciones
componentDidMount = () => { const { navigation } = this.props; this.props.updateNavigation(navigation); }; const mapDispatchToProps = (dispatch) => { return { ...bindActionCreators({ changeCount, updateNavigation }, dispatch) }; };Como podemos ver aquí, solo he activado la acción updateNavigation. Pero actualiza estados con parámetros duplicados en estado redux como se muestra a continuación
La o/p esperada será
countReducer : {count : 0} updateNavigation : {navegación :{}}
La forma de estado de cada reductor es incorrecta. Consulte los documentos de definición de forma de estado e intente esto:
export const countReducer = (state = { count: 0 }, action) => { switch (action.type) { case COUNTER_CHANGE: return { ...state, count: action.payload, }; default: return state; } }; export const updateNavigation = (state = { navigation: {} }, action) => { switch (action.type) { case UPDATE_NAVIGATION: return { ...state, navigation: action.payload, }; default: return state; } }; import { countReducer, updateNavigation } from "../reducers/countReducer"; import { combineReducers } from "redux"; const allReducers = combineReducers({ countReducer, updateNavigation, }); const store = createStore(allReducers); console.log(store.getState());Producción:
{ countReducer: { count: 0 }, updateNavigation: { navigation: {} } }En tu acción/index.js
import { COUNTER_CHANGE, UPDATE_NAVIGATION } from "../constants"; export function changeCount(count) { dispatch( { type: COUNTER_CHANGE, payload: count, }); } export function updateNavigation(obj) { dispatch({ type: UPDATE_NAVIGATION, payload: obj, }); }Envía los datos sin devolverlos