A Beginner’s Guide to Redux in React

Introduction

State management is a fundamental concept in React applications. As applications grow, managing and sharing state between components becomes increasingly complex.

While React provides built-in hooks like useState and useContext, they are often not sufficient for large-scale applications with deeply nested components and complex data flow.

Redux addresses this problem by providing a centralized and predictable way to manage application state.

What is Redux?

Redux is a state management library that maintains the entire application state in a single object called the store.

It follows a strict pattern that ensures:

• State is predictable


• Changes are traceable


• Data flow is controlled

Redux is based on the idea of a single source of truth, meaning all application data is stored in one place.

Why Redux is Needed

In React, data is usually passed from parent to child using props. In large applications, this leads to:

• Prop drilling (passing data through multiple layers)


• Difficult debugging


• Scattered state logic

Redux solves these problems by:

• Allowing global access to state


• Making state changes predictable


• Separating logic from UI components

Core Principles of Redux

Redux follows three fundamental principles:

1. Single Source of Truth

The entire state of the application is stored in one central object (store). This makes debugging and tracking changes easier.

2. State is Read-Only

You cannot directly modify the state. Instead, you must dispatch an action that describes what should change.

3. Changes are Made with Pure Functions

Reducers are pure functions. Given the same input, they always return the same output without side effects.

Core Components of Redux

1. Store

The store holds the complete state of the application.

const store = createStore(reducer);

It provides methods to:

• Access state (getState)


• Dispatch actions (dispatch)


• Subscribe to changes (subscribe)

2. Actions

Actions are plain JavaScript objects that describe what happened.

{ type: "INCREMENT" }

They must have a type property and can optionally include additional data.

3. Reducers

Reducers specify how the state changes in response to an action.

const reducer = (state = 0, action) => {

  switch (action.type) {

    case "INCREMENT":

      return state + 1;

    default:

      return state;

  }

};

Reducers must:

• Be pure functions


• Not mutate the existing state


• Return a new state object

Redux Data Flow

Redux follows a unidirectional data flow:

1. A component triggers an action


2. The action is dispatched to the store


3. The reducer processes the action


4. The store updates the state


5. The UI re-renders with new data

This flow ensures consistency and makes the application easier to reason about.

Integration with React

Redux is commonly used with React through the react-redux library.

Key hooks:

• 
  useSelector — used to read data from the store


• 
  useDispatch — used to send actions to the store

Example:

import { useSelector, useDispatch } from "react-redux";



function Counter() {

  const count = useSelector((state) => state.count);

  const dispatch = useDispatch();



  return (

    <>

      <h1>{count}</h1>

      <button onClick={() => dispatch({ type: "INCREMENT" })}>

        Increment

      </button>

    </>

  );

}

Limitations of Redux

• Requires more boilerplate code


• Adds complexity for small applications


• Initial learning curve can be high

Redux vs React State

When to Use Redux

Use Redux when:

• Multiple components rely on the same state


• State logic becomes complex


• Application size increases

Avoid Redux when:

• The application is small


• State is simple and localized

Modern Approach: Redux Toolkit

Redux Toolkit is the recommended way to use Redux today. It simplifies:

• Store configuration


• Reducer creation


• Immutable updates

It reduces boilerplate and improves developer experience while keeping the core Redux concepts intact.

reference

• React Redux (Official Bindings)


• Redux Official Website


• Redux Toolkit