Setup Redux for Large React Projects - without Tears

For small React projects, it's cool passing props between React components, from the Arctic to Antarctica 😃. With increasing complexity, we pass a bit more props and possibly throw in React Context to manage some state data between nested sibling components.

As the project grows, the need for a proper state management tool becomes unavoidable. This is the sweet spot for a tool like Redux in React projects. However, setting up Redux is considered herculean due to the amount of boilerplate required.

In this post, we'll set up a redux store suitable for large projects without shedding tears. This post's scope doesn't cover setting up Thunk middleware for async actions or persisting a store.

We'll focus mostly on store creation, project composition, entity reusability, and manageability. A considerable concern amongst developers using Redux in React projects is the convolution of the codebase with the increase in state variables.

What is Redux?

Quick director cut for those unfamiliar with Redux. Redux is a robust state container for JavaScript applications. Peep the barrels in the banner image. Like they hold wine possibly in your cellar, Redux creates a box for application data in your JavaScript application.

Redux creates an application data store and provides logic to retrieve and modify the stored data. Wondering how state management works on the bare minimum? I wrote this post about it using HTML and JavaScript.

With accompanying tools like React-Redux, state management in React apps becomes seamless. With state hoisted from components into the application layer, interactivity in your frontend app becomes almost limitless.

Prerequisites

Knowledge of JavaScript and React.js is required to follow through with this post. We'll create a simple counter app on CodeSandbox with data from the application state.

Create a React Project

Create a new CodeSandbox using the React starter by CodeSandBox. You can find the final code for this post here.

The created project comes with boilerplate code with the app entry point in src/index.js and the home page in src/App.js. Basic CSS styles are written in src/styles.css.

Create the base HTML structure for the counter app with 2 buttons and a counter display in App.js. Modify the file to:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Counter is 0</h2>
      <button>Increment</button>
      <button>Decrement</button>
    </div>
  );
}

We wrapped all the app with Provider and passed it props of the imported store.

Consume State

If you made it this far, you have setup redux and can utilize the app state's data.

react-redux provides two super useful hooks to store and retrieve data from redux. They are useSelector and useDispatch, to retrieve data and dispatch actions respectively. We'll modify src/App.js to utilize these hooks in making the counter interactive. Do this with:

import React from "react";
import "./styles.css";
import { useSelector, useDispatch } from "react-redux";
import { IncrementCounterAction } from "./redux/counter/increment-counter-action";
import { DecrementCounterAction } from "./redux/counter/decrement-counter-action";

export default function App() {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  const _handleIncrement = () => {
    dispatch(IncrementCounterAction());
  };

  const _handleDecrement = () => {
    dispatch(DecrementCounterAction());
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Counter is {counter}</h2>
      <button onClick={_handleIncrement}>Increment</button>
      <button onClick={_handleDecrement}>Decrement</button>
    </div>
  );
}

Here, we imported the actions which will be dispatched on increment and decrement. We created two functions to handle the dispatch. The counter data is also retrieved from the redux state with an initial value of 0. In the case there is a payload, this is passed as an argument to the action call.

The increment and decrement functions are passed to the onClick handler of the buttons to increment and decrement the counter variable, respectively.

You can test out the buttons on end.

Here's what it looks like now:

You can find the CodeSandbox demo here.

Summary

In this post, we set up a redux store with constants, reducers, and actions. The store data is utilized in a counter application.

A key takeaway from this post is in the redux store setup and the separation of concerns. This ensures that when the application size increases and state variables abound, setting up new actions and reducers are seamless. Also, the codebase is maintainable.

Here's to becoming better, and wearing a mask, for now. 😃

William.

This article was originally published on Hackmamba.