Introduction to state management using Redux

Redux is a state management library for JavaScript applications, commonly used with React. It helps manage the global state of your application in a predictable and organized way. Before we dive into actual Redux integration in our React app, we need to understand some core terminologies associated with Redux.

State – The state is the set of data that is managed by a React component or the current information behind a React application (or simply React app). It could be a username, cart count or todo item etc. State can be any JavaScript type including number, string, boolean, array or object. An example is given below:

const state = ['Read book', 'Do exercise', 'Do Meditation' ];

Each piece of information in this state, an array in the above example, would form some part of the user interface or component in a React app.

Action – Most well designed applications will have separate components that need to communicate and share data with each other. An e-commerce application might transfer a product ID and quantity on the clicking a button. This entire interaction can be defined as an “Action” in Redux terminology. Actions are represented as plain JavaScript objects that are passed to the store in Redux.

Given below is an example of a Redux action:

const action = {
 type: 'ecom/addToCart',
 payload: {productId: 'P001', quantity: 1 }
}

Reducer – A Redux reducer is a plain JavaScript function that defines how the current state and an action are used in combination to create the new state of a UI component in React app. Given below is a sample reducer function:

// cartReducer.js
const initialState = {
  items: [], // Initial cart is empty
};

const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ecom/addToCart':
      const { productId, quantity } = action.payload;
      const newItem = { productId, quantity };
      return { ...state, items: [...state.items, newItem] };

    default:
      return state;
  }
};

export default cartReducer;

In the above example reducer function, there are code which are required when use in real life application like checking if the item is already in cart and updating it if found etc. I leave them just for simplicity.

Store – A store is a core concept in Redux that serves as a centralized container for our application’s state. It holds the entire state tree of a React app, providing a single source of truth for all your data. The store is responsible for managing the state, responding to actions, and notifying the components of state changes.

Given below is a Redux store for an e-commerce React app.

import { createStore } from 'redux';

// your reducer

const store = createStore(cartReducer);

export default store;

Add on: In a basic Redux setup within a React application, the folder structure is organized to manage your application’s state using Redux. Typically, you’ll have a src directory where you store your application code. Inside this directory, create separate folders for different aspects of Redux. Refer the diagram below to understand better.

src/
├── actions/
│   └── ... (action files)
├── reducers/
│   └── ... (reducer files)
├── store.js
└── index.js