Understanding the Counter Application

This chapter will be mostly focused on looking at and understanding code. The explanations will be limited to the reader, then look at the code themselves and make connections based on what we learned in the previous chapters.

This chapter will look at the Counter app with the Redux template. When we run the default application, we see the following screen:

Following is the file structure of the Redux app highlighting the files we want to look at:

• src

  • app

    • store.js

• features

  • counter

  • counter.js

  • counterAPI.js

  • counterSlice.js

• App.js

• index.js

We will first look at the store.js file to get an idea of the structure of the Redux store:

js
9
1
2
3
4
5
export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

It has a single slice and is handled by the reducer counterReducer. Let’s look at the sliced code inside the counterSlice.js file:

js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchCount } from './counterAPI';
 
const initialState = {
  value: 0,
  status: 'idle',
};
 
// The function below is called a thunk and allows us to perform async logic. It
// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
// will call the thunk with the `dispatch` function as the first argument. Async
// code can then be executed, and other actions can be dispatched. Thunks are
// typically used to make async requests.
export const incrementAsync = createAsyncThunk(
  'counter/fetchCount',
  async (amount) => {
    const response = await fetchCount(amount);
    // The value we return becomes the `fulfilled` action payload
    return response.data;
  }
);
 
export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based on those changes
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;

The initial state is set to the following:

js
9
1
2
3
4
const initialState = {
  value: 0,
  status: 'idle',
};

It has reducers, namely increment, decrement, and incrementByAmount. It also has two thunk functions. The first thunk function is the following:

js
9
1
2
3
4
5
6
7
8
export const incrementAsync = createAsyncThunk(
  'counter/fetchCount',
  async (amount) => {
    const response = await fetchCount(amount);
    // The value we return becomes the `fulfilled` action payload
    return response.data;
  }
);

It fetches data from a pseudo-API in the counterAPI file. It is nothing but a timer that delays sending the data by 500 ms:

js
9
1
2
3
4
5
export function fetchCount(amount = 1) {
  return new Promise((resolve) =>
    setTimeout(() => resolve({ data: amount }), 500)
  );
}

The following reducers are handling it:

js
99
1
2
3
4
5
6
7
8
9
10
extraReducers: (builder) => {
  builder
    .addCase(incrementAsync.pending, (state) => {
      state.status = 'loading';
    })
    .addCase(incrementAsync.fulfilled, (state, action) => {
      state.status = 'idle';
      state.value += action.payload;
    });
}

While it's waiting for the data, the status key is set to loading and when it is done, it is set back to idle.

The second thunk function simply dispatches another action based on the current state, conditionally:

js
9
1
2
3
4
5
6
export const incrementIfOdd = (amount) => (dispatch, getState) => {
  const currentValue = selectCount(getState());
  if (currentValue % 2 === 1) {
    dispatch(incrementByAmount(amount));
  }
};

There is also a selector being exported from the file:

js
export const selectCount = (state) => state.counter.value;

Now that we know what's in the slice, let’s look at the entry point of the application index.js:

js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

We enclose the top-level component into <Provider> tags and set the store attribute to the imported store.

The top-level component is from the App.js file:

js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React from 'react';
import logo from './logo.svg';
import { Counter } from './features/counter/Counter';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Counter />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <span>
          <span>Learn </span>
          <a
            className="App-link"
            href="https://reactjs.org/"
            target="_blank"
            rel="noopener noreferrer"
          >
            React
          </a>
          <span>, </span>
          <a
            className="App-link"
            href="https://redux.js.org/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Redux
          </a>
          <span>, </span>
          <a
            className="App-link"

The top-level components have the following elements:

In the start, the actions, thunks, and selector has been imported. Along with that, the relevant functions from react-redux:

js
9
1
2
3
4
5
6
7
8
9
import { useSelector, useDispatch } from 'react-redux';
import {
  decrement,
  increment,
  incrementByAmount,
  incrementAsync,
  incrementIfOdd,
  selectCount,
} from './counterSlice';

The selector has been set to the count constant in the following lines. You will also notice a local state variable, incrementAmount. We don’t want to store this variable in the Redux store since we don’t want to make this state value accessible from other components.

js
9
1
2
3
const count = useSelector(selectCount);
const dispatch = useDispatch();
const [incrementAmount, setIncrementAmount] = useState('2');

In the following section, we use the selector to display the count and use the dispatch function to dispatch relevant actions on button clicks for decrementing or incrementing the count:

js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div className={styles.row}>
  <button
    className={styles.button}
    aria-label="Decrement value"
    onClick={() => dispatch(decrement())}
  >
    -
  </button>
  <span className={styles.value}>{count}</span>
  <button
    className={styles.button}
    aria-label="Increment value"
    onClick={() => dispatch(increment())}
  >
    +
  </button>
</div>

In the next <div>, we have buttons for incrementing by amount. In this case, we also pass arguments into the dispatch actions, which go into the payload:

js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div className={styles.row}>
  <input
    className={styles.textbox}
    aria-label="Set increment amount"
    value={incrementAmount}
    onChange={(e) => setIncrementAmount(e.target.value)}
  />
  <button
    className={styles.button}
    onClick={() => dispatch(incrementByAmount(incrementValue))}
  >
    Add Amount
  </button>
  <button
    className={styles.asyncButton}
    onClick={() => dispatch(incrementAsync(incrementValue))}
  >
    Add Async
  </button>
  <button
    className={styles.button}
    onClick={() => dispatch(incrementIfOdd(incrementValue))}
  >
    Add If Odd
  </button>
</div>

Recall that payload is a key inside the action argument, which can be accessed from the reducers.