Redux- why are multiple states changing despite dispatching action to only one state

Question

In Redux, I dispatched actions regarding the reducer cakeReducer. But both the state of cakeReducer and IceCreamReducer is being changed, though no action towards IceCreamReducer is not invoked.

const redux = require("redux");



const createStore = redux.createStore;
const bindActionCreators = redux.bindActionCreators;
const combineReducers = redux.combineReducers;

// Actions
const CAKE_ORDERED = "CAKE_ORDERED";
const CAKE_RESTOCKED = "CAKE_RESTOCKED";
const ICECREAM_ORDERED = "ICECREAM_ORDERED";
const ICECREAM_RESTOCKED = "ICECREAM_RESTOCKED";

function orderCake(qty = 1) {
  return {
    type: CAKE_ORDERED,
    payload: qty,
  };
}
function restockCake(qty = 1) {
  return {
    type: CAKE_RESTOCKED,
    payload: qty,
  };
}
function orderIceCream(qty = 1) {
  return {
    type: ICECREAM_ORDERED,
    payload: qty,
  };
}
function restockIceCream(qty = 1) {
  return {
    type: ICECREAM_RESTOCKED,
    payload: qty,
  };
}

// Reducers
const initialCakeState = {
  numOfCakes: 10,
};

const initialIceCreamState = {
  numOfIceCreams: 20,
};

const cakeReducer = (state = initialCakeState, action) => {
  switch (action.type) {
    case CAKE_ORDERED:
      return {
        ...state,
        numOfCakes: state.numOfCakes - 1,
      };
    case CAKE_RESTOCKED:
      return {
        ...state,
        numOfCakes: state.numOfCakes + action.payload,
      };
      `enter code here`;
    default:
      return state;
  }
};

const iceCreamReducer = (state = initialIceCreamState, action) => {
  switch (action.type) {
    case ICECREAM_ORDERED:
      return {
        ...state,
        numOfIceCreams: state.numOfIceCreams - 1,
      };
    case ICECREAM_RESTOCKED:
      return {
        ...state,
        numOfIceCreams: state.numOfIceCreams + action.payload,
      };
    case CAKE_ORDERED:
      return {
        ...state,
        numOfIceCreams: state.numOfIceCreams - 1,
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  cake: cakeReducer,
  iceCream: iceCreamReducer,
});

// Store
const store = createStore(rootReducer);

console.log("Initial State ", store.getState());
const unsubscribe = store.subscribe(() => {
  console.log("Updated State ", store.getState());
});

const actions = bindActionCreators(
  { orderCake, restockCake, orderIceCream, restockIceCream },
  store.dispatch
);
actions.orderCake();
actions.orderCake();
actions.orderCake();
actions.restockCake(3);

unsubscribe();

The output is:

Initial State { cake: { numOfCakes: 10 }, iceCream: { numOfIceCreams: 20 } }

Updated State { cake: { numOfCakes: 9 }, iceCream: { numOfIceCreams: 19 } }

Updated State { cake: { numOfCakes: 8 }, iceCream: { numOfIceCreams: 18 } }

Updated State { cake: { numOfCakes: 7 }, iceCream: { numOfIceCreams: 17 } }

Updated State { cake: { numOfCakes: 10 }, iceCream: { numOfIceCreams: 17 } }

I didn't dispatch any action to numOfIceCreams. But it is still being updated. All I want to know is how to update numOfCakes keeping numOfIceCreams untouched

Solved. I accidentally put Cake_Ordered in iceCreamReducer.

Please be aware that you are writing a very outdated style of Redux here. Redux doesn't use switch..case reducers, ACTION_TYPES, immutable reducer logic or hand-written action creators since 2019. You are probably following a very outdated tutorial. Nowadays you should be using the official Redux Toolkit. (more on that here: https://redux.js.org/introduction/why-rtk-is-redux-today ). I'd recommend following the [official Redux tutorial](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) — phry, Aug 27 '22 at 10:02

score 1 · Accepted Answer · answered Aug 27 '22 at 08:16

1

You seem to handle the case CAKE_ORDERED in your ice cream reducer, which might be there by accident.

answered Aug 27 '22 at 08:16

timotgl

2,865
1
9
19

Thank you, brother. How did you find it so fast? I'm working on it for one whole night. May god bless you. – Emdadudl Haque Apu Aug 27 '22 at 08:22
I saw that there should be two actions in each reducer (one to increment, one to decrement) but then one reducer had 3 switch cases. Just a fresh set of eyes I guess. – timotgl Aug 27 '22 at 08:25

Redux- why are multiple states changing despite dispatching action to only one state

1 Answers1