Create a React app using Webpack 5 + Babel + Karma + Redux (Part 2: REDUX)

As we started our first part in this tutorial last time, we’re going to attack now the second part which a lot of people asked about, the Redux implementation.

For people who don’t exactly know it, Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React for building user interfaces.

Store
In this tutorial part, we will create a redux store where our app state will be stored, and that store is considered as the only source of truth of the whole app state.

Action
We will also create some javascript objects called actions with a mandatory “type” field that will the triggered action. It’s highly recommended to use another file/module to define your type string values for better readability.

export const INCREMENT = "INCREMENT"; 
export const DECREMENT = "DECREMENT";

for an incrementation our action object will be like this:

export const increaseCounter = () => {
  return {
    type: INCREMENT,  
  }
};

Reducer
The reducers are basically JS pure functions that contain a switch statement that redirects to the right action.type value and will set our state to a new object with a new value. In the following example, we are going to handle two actions in order to increment and decrement the count field in our app state.

const counterReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1,
      };
     case DECREMENT:
      return {
        ...state,
        count: state.count - 1,
      };
     default:
      return state;
  }};

After explaining the most important parts of Redux let’s start now implementing it to our app from the last tutorial (git repo). A Counter example is very good to understand the whole process of implementation.

We will need first to add react-redux and redux to our app so we are going to run:

npm install react-redux redux

Then, we create our app store and reducers; we’ll need to create a new folder under src/ with two files: store.js and index.js. This folder will contain also other reducers’ folders such as the counter reducer.
Our index.js and store.js will contain relatively the following code:

//index.js
import { combineReducers } from "redux";
const reducers = combineReducers({
   // our app reducers
   //counter: counterReducer  <-- will be added later
})
export default reducers;

//store.js
import { createStore } from "redux";
import reducers from ".";
const store = createStore(reducers);
export default store;

And now the important part is to wrap our app body in the index.js with the <Provider> module with specifying the store that we created before:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./index.scss";
import store from "./reducers/store";
export const App = () => {
  return (<h1>Hello World!</h1>);
};
if (document.querySelector("#root")) {
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
, document.querySelector("#root"));
}

In the next step, we will create our Counter component which will have two buttons to increment and decrement as it will show the count value.

Here we have to create our counter reducer, so under src/reducers/ we’ll create a new folder called counter, it will contain three files; counter.action.js, counter.reducer.js, and counter.type.js

And also we need a container to connect the component state and action to our reducer as we’ll need to connect it to its component ( Counter ):
**In order to have a better-organized project structure we will place the components under src/components/componentName and the containers under src/containers/containerName

After adding our new module in the main component we will get our Counter working, but an important hint here is that we have to include the container and not the component inside the <App/>

And that’s the final results that we get

In this part we discussed the Redux implementation in our react project, it may seem complicated but it’s not really that complex stuff so try to follow the steps and ask questions if something is not clear. This tutorial code is available on this Github repo.
In this next part, we will test our app using Karma and Jasmine, see you! 😊