Dispatching multiple actions in redux duplicates the state parameters-CodePudding

I have used created two actions and their respective reducers. When i dispatch any single action, both actions initial states are being saved to state where the parameters of the states are duplicated.

actions/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,
  };
}

reducers.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;

reducer/index.js

import { countReducer, updateNavigation } from "../reducers/countReducer";
import { combineReducers } from "redux";

const allReducers = combineReducers({
  countReducer,
  updateNavigation,
});

export default allReducers;

Dispatching actions

componentDidMount = () => {
    const { navigation } = this.props;
    this.props.updateNavigation(navigation);
};

const mapDispatchToProps = (dispatch) => {
  return { ...bindActionCreators({ changeCount, updateNavigation }, dispatch) };
};

As we can see here I have triggered only updateNavigation action. But it updates states with duplicate parameters in redux state as shown below

The expected o/p will be

countReducer : {count : 0} updateNavigation : {navigation :{}}

CodePudding user response：

The shape of state for each reducer is incorrect. See defining-state-shape docs and try this:

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());

Output:

{ countReducer: { count: 0 }, updateNavigation: { navigation: {} } }

CodePudding user response：

In your action/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,
  });
}

Dispatch the data without returning it