Cannot increment a simple value in redux store

Question

I am very new to react and redux and still trying to wrap my head around basics. I need to use boilerplate for the project that is upcoming, where redux is split in different folders and files - actions, reduces, store. Like so:

Redux
├── actions
│   ├── actionTypes.js
│   ├── counterActions.js // created by me
│   └── usersActions.js
├── reducers
│   ├── counterReducer.js // created by me
│   ├── index.js
│   ├── initialState.js
│   └── usersReducer.js
└── store
    └── configureStore.js

So here, I am simply trying to display data from my store to my app and manipulate it with a button clicks (increment, decrement). Here is my files content:

./actions/actionTypes:

export const GET_REQUESTER_SUCCESS = 'GET_REQUESTER_SUCCESS';
export const COUNTER_INCREMENT = 'COUNTER_INCREMENT';
export const COUNTER_DECREMENT = 'COUNTER_DECREMENT';

./actions/counterActions:

import * as types from './actionTypes'

export const counterIncrement = () => {
    return {
        type: types.COUNTER_INCREMENT,
    }
}

export const counterDecrement = () => {
    return {
        type: types.COUNTER_DECREMENT,
    }
}

./reducers/counterReducer.js:

import * as types from "../actions/actionTypes";
import initialState from "./initialState";

export default function changeCounter(state = initialState.counter, action) {
  switch (action.types) {
    case types.COUNTER_INCREMENT:
      console.log('increment')
      return state + 1
    case types.COUNTER_DECREMENT:
      console.log('decrement')
      return state - 1
    default:
      return state;
  }
};

./reducers/initialState.js:

export default {
  users: {},
  counter: 0,
};

All the reducers are then combined in the ./reducers/index.js files:

import { combineReducers } from 'redux';
import users from './usersReducer';
import changeCounter from './counterReducer'

const rootReducer = combineReducers({
  users,
  changeCounter,
});

export default rootReducer;

And last but not least, snippet of the App where I am displaying and trying to increment my counter:

import PropTypes from 'prop-types';
import './App.scss';
import { connect, useSelector, useDispatch } from 'react-redux';
import HelloWorld from './components/HelloWorld'
import { counterIncrement } from './redux/actions/counterActions';


function App(props) {
  const { users } = props;
  const { requester = {} } = users;
  const counter = useSelector(state => state.changeCounter)
  const dispatch = useDispatch();
  return (
    <div className="App">
      <HelloWorld />
      <p>Counter is {counter}</p>
      <button onClick={() => dispatch(counterIncrement())}>+</button>
      <button>-</button>

So, as far as I understand - my reducer is created, it is combined with another one (comes with boilerplate and works well). I am dispatching an action (which I can see in redux dev tool being dispatched), but my reducer is just not doing an increment.

What would be the reason for that. Please let me know if I provided insufficient information.

This is just a typographic error. It will not help for other readers of this question. — new QOpenGLWidget

Vivek Doshi Vivek Doshi · Accepted Answer · 2020-05-10T12:36:49

I think it's typo mistake, change types to type :

In ./reducers/counterReducer.js

export default function changeCounter(state = initialState.counter, action) {
  switch (action.types) { // <----- ISSUE

change it to :

export default function changeCounter(state = initialState.counter, action) {
  switch (action.type) { //<---- CHANGE

WORKING DEMO

Cannot increment a simple value in redux store

1 Answers