Introduction to Redux: A State Management Library

Photo by Jackson Sophat on Unsplash

First, Let’s Understand the Problem

When we have multiple components that are interdependent on each other’s state, managing them becomes increasingly complex. Without a structured approach, state updates can become unpredictable, debugging turns into a nightmare, and scaling the application gets challenging.

How can we bring order and make state management more efficient?

Redux — The Solution

Redux is a powerful state management library designed to streamline state handling in complex applications. Here’s why Redux stands out:

• Single Source of Truth: The entire state of the application is stored centrally, ensuring consistency.
• Predictability: With a strict one-way data flow, Redux ensures state changes are clear and traceable.
• Ease of Debugging: Redux DevTools provide a history of state changes, making it easier to debug issues.
• State Persistence: Redux preserves state across page navigations and reloads, maintaining data integrity.
• Undo/Redo Actions: Redux enables features that allow users to revert or reapply actions effortlessly.
• Framework Agnostic: Redux seamlessly integrates with React, Angular, and Vanilla JavaScript.

Building Blocks of Redux

Redux follows a unidirectional data flow:

1. Actions — These are plain JavaScript objects describing an event or intent to change the state.
2. Reducers — Functions that take the current state and an action, then return a new state.
3. Store — A centralized object that holds the entire application state.

Redux Architecture

Redux follows a simple yet effective architecture:

• Centralized State: The store maintains a single JavaScript object that holds the state for the entire application.
• Immutable State: Instead of modifying the original state, updates result in a new object with modified values.

Immutability: An immutable object is an object whose state cannot be changed after creation. Instead of modifying the original object, a new one is created with the updated values.

Example:
let str = "Hello";
str[0] = "Y"; // ❌ Does not modify the string
console.log(str); // Output: "Hello"

1. Reducers — The Heart of Redux

A reducer is a pure function that updates the state based on an action. It takes the current state and an action as parameters and returns a new state.

Creating a reducer:

let lastId = 0;
function reducer(state = [], action) {
  if (action.type === "bugAdded")
    return [
      ...state,
      {
        id: ++lastId,
        description: action.payload.description,
        resolved: false,
      },
    ];
  else if (action.type === "bugRemoved")
    return state.filter((bug) => bug.id !== action.payload.id);
  return state;
}

• Reducers should always be pure functions — no API calls or global variable manipulations.
• The state should be initialized with a default value.
• We can use if-else or switch statements inside reducers.

2. Creating a Redux Store

The store is where the application state is maintained. It is created using createStore() and requires a reducer.

import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

3. Dispatching Actions

To modify the state, we dispatch actions using the dispatch() method.

import store from "./store";

store.dispatch({
  type: "bugAdded",
  payload: {
    description: "Bug number 1",
  },
});

4. Subscribing to the Store

A subscription is triggered every time the state changes. This allows us to listen for updates and perform necessary UI updates.

import store from "./store";

store.subscribe(() => {
  console.log("Store changed", store.getState());
});
store.dispatch({
  type: "bugAdded",
  payload: {
    description: "Bug number 1",
  },
});

Benefits of Using Redux

• Predictable State Management: A single source of truth ensures consistent state updates.
• Centralized State: Debugging becomes easier with a clear view of the application state.
• Powerful Developer Tools: Redux DevTools allow time-travel debugging and state inspection.
• Improved Maintainability: Helps organize large-scale applications with structured state handling.

When to Use Redux

Redux is particularly useful in applications with:

• Complex state logic shared across multiple components.
• Frequent user interactions and updates to state.
• A need for debugging tools and state persistence.

However, for smaller applications, Redux may be unnecessary. Simpler alternatives like React Context or local component state could be more efficient.

Conclusion

Redux simplifies state management and makes applications more predictable and maintainable. By following its core principles, developers can create scalable applications with a well-structured data flow. Whether Redux is the right choice depends on the complexity of your application and its state management requirements.