Redux is not working while using combine reducer

Question

I'm new to redux and react native as well .I am trying to initialize a basic store from a root reducer with initial state. While connecting root reducer to store my redux is not working. But when I'm connecting a single reducer to store my redux is working.

RootReducer.js

import {combineReducers} from 'redux';
import cartItemsReducer from './CartItems';
import {CounterReducer} from './Counter';

const RootReducer = combineReducers({
  cartItemsReducer,
  CounterReducer,
});

export default RootReducer;

CartItems.js

import {ADD_TO_CART, REMOVE_FROM_CART} from '../Actions/ActionTypes';

const initialState = [];

const cartItemsReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return [...state, action.payload];
    case REMOVE_FROM_CART:
      return state.filter((cartItem) => cartItem.id !== action.payload.id);
  }
  return state;
};

export default cartItemsReducer;

Counter.js

import {INCREASE_COUNT, DECREASE_COUNT} from '../Actions/ActionTypes';

const InitialState = {
  count: 0,
};

export const CounterReducer = (state = InitialState, action) => {
  switch (action.type) {
    case INCREASE_COUNT:
      return {
        ...state,
        count: state.count + 1,
      };
    case DECREASE_COUNT:
      return {
        ...state,
        count: state.count - 1,
      };
  }
  return state;
};

store.js

import RootReducer from '../Reducers/RootReducer';

export const store = createStore(RootReducer);

App.js

import React from 'react';
import AppNavigator from './src/AppNavigator';
import {Provider} from 'react-redux';
import {store} from './src/Redux/Store/store';

const App = () => {
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
};

export default App;

CounterComponent.js

I'm using function component for my application

import React from 'react';
import {View} from 'react-native';
import AppHeader from '../Common/AppHeader';
import CustomButton from '../Common/CustomButton';
import CustomText from '../Common/CustomText';
import {useDispatch, useSelector} from 'react-redux';
import {INCREASE_COUNT, DECREASE_COUNT} from '../Redux/Actions/ActionTypes';
const CounterComponent = () => {
  const Counters = useSelector((state) => state.count);
  const dispatch = useDispatch();
  const IncreaseCount = () => {
    dispatch({type: INCREASE_COUNT});
  };
  const DecreaseCount = () => {
    dispatch({type: DECREASE_COUNT});
  };
  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      <AppHeader HeaderName="Counter" isLeft={true} leftIconName="arrowleft" />
      <View style={{width: 150, alignSelf: 'center', marginTop: 20}}>
        <CustomButton ButtonName="+" onPress={() => IncreaseCount()} />
        <CustomText value={Counters} style={{textAlign: 'center'}} />
        <CustomButton ButtonName="-" onPress={() => DecreaseCount()} />
      </View>
    </View>
  );
};

export default CounterComponent;

Why is my usage of combineReducers not working in the same way as when I use the single rootreducer?

Wen W Wen W · Accepted Answer · 2020-11-15T14:58:59

after you combine the reducers, your state becomes the following:

               store
                /\
               /  \
              /    \
cartItemsReducer   CounterReducer

so you need to reference counter like so:

state.CounterReducer.count

Redux is not working while using combine reducer

2 Answers