Logo
Tutorials Articles Code Playground Tools
Sign In Get Started
Module: Redux Fundamentals

What is Redux

Redux is a predictable state container for JavaScript apps. Let’s break down what that means and why you might use it.

The Problem Redux Solves

In complex React applications, managing data (state) can become challenging. As your app grows, passing data down through multiple components (prop drilling) can become cumbersome and difficult to maintain. Directly modifying state within components can lead to unpredictable behavior and make debugging a nightmare.

Redux provides a centralized store for your application’s state, making it easier to manage, debug, and test.

Core Concepts

Redux operates on three core principles:

  1. Single Source of Truth:The entire application state is stored in a single JavaScript object, called thestore. This makes it easy to inspect and understand the current state of your application.
  2. State is Read-Only:You can’t directly modify the state. Instead, you dispatchactionsthat describewhathappened. These actions are then processed byreducersto produce anewstate. This immutability is crucial for predictability and debugging.
  3. Changes are Made with Pure Functions:Reducersare pure functions. This means they:
    • Take the previous state and an action as arguments.
    • Return anewstate object.
    • Have no side effects (don’t modify anything outside their scope).

The Redux Data Flow

Here’s how data flows through a Redux application:

  1. Action:Something happens in your application (e.g., a user clicks a button). You dispatch an action, which is a plain JavaScript object describing the event. Actions have atypeproperty (required) and can optionally include apayload(data associated with the action).

// Example Action
{
  type: 'ADD_TODO',
  payload: 'Buy groceries'
}

  1. Dispatcher: The dispatch() function (provided by Redux) sends the action to the reducers.

  2. Reducer: Reducers are responsible for handling actions and updating the state. Each reducer typically handles a specific slice of the state. The reducer receives the current state and the action, and returns a new state based on the action's type.

    // Example Reducer
function todoReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { text: action.payload, completed: false }];
    default:
      return state;
  }
}

  3. Store: The store holds the application state. When a reducer returns a new state, the store is updated. Components that are subscribed to the store are notified of the change and can re-render to reflect the new state.

Why Use Redux?

  • Predictability: The unidirectional data flow and pure functions make it easier to understand how your application's state changes.
  • Maintainability: Centralized state management simplifies debugging and makes it easier to reason about your application's logic.
  • Testability: Pure reducers are easy to test because they always return the same output for the same input.
  • Debugging: Redux DevTools provide powerful debugging capabilities, allowing you to inspect the state, actions, and state changes over time.
  • Scalability: Redux is well-suited for large and complex applications.

When Not to Use Redux

Redux isn't always the right solution. For small, simple applications, the overhead of setting up and managing Redux might outweigh the benefits. Consider these alternatives:

  • React's built-in useState and useContext: These hooks are often sufficient for managing state in smaller applications.
  • Component State: For localized state that doesn't need to be shared across multiple components, managing state within the component itself is often the simplest approach.

Resources