No history yet

Introduction to Redux

Managing App Data

As a React application grows, so does its state. State is simply the data that your application needs to keep track of—things like user information, a list of items, or whether a button is toggled. In a small app, you can pass this data from parent components down to child components using props.

This works well at first. But what happens when you have a deeply nested component that needs data from a component way up at the top of the tree? You have to pass that prop through every single component in between, even the ones that don't need it. This is called “prop drilling,” and it can quickly make your code messy and hard to maintain.

This is where a state management library like Redux comes in. Redux provides a central place to store all your application's state, called a "store." Instead of passing data down through component layers, any component can access the data it needs directly from this central store.

The Redux Flow

Redux works on a principle of a strict, one-way data flow. Think of it like a bank. You can't just walk into the vault and change your balance. You have to fill out a withdrawal slip, give it to a teller, and they update the records. This predictable process ensures that changes to the state are traceable and organized.

This flow has three main parts: the Store, Actions, and Reducers.

Lesson image

Store: This is a single JavaScript object that holds the entire state of your application. It's the "single source of truth." There is only one store in any Redux application.

Action: An action is a plain JavaScript object that describes an event that happened in your app. It’s the only way to send data from your application to the Redux store. Think of it as a message that says, "Something happened." An action must have a type property, which is usually a string, like 'ADD_ITEM_TO_CART'. It can also have an optional payload with any data related to the event.

Reducer: A reducer is a pure function that determines how the state changes in response to an action. It takes two arguments: the current state and an action. It then returns the new state. It's crucial that reducers never change the original state directly. Instead, they create a new state object with the necessary updates. This principle is called immutability.

// An Action is a plain object describing an event.
const addItemAction = {
  type: 'ADD_ITEM',
  payload: { name: 'Milk', price: 2.99 }
};

// A Reducer is a function that returns the new state.
function cartReducer(state = { items: [] }, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      // Return a new state object, don't modify the old one!
      return {
        ...state,
        items: [...state.items, action.payload]
      };
    default:
      return state;
  }
}

Using Redux with React

While Redux can be used with any JavaScript framework, it's most commonly paired with React. A library called react-redux provides the tools to connect your React components to the Redux store.

When a component is connected, it can do two things:

  1. Read data from the store's state.
  2. Dispatch actions to update the store's state.

When the part of the store's state that a component is listening to changes, react-redux automatically re-renders that component with the new data. This completely eliminates the need for prop drilling. Any component, no matter how deeply nested, can connect to the store and get exactly the data it needs.

Redux provides a powerful way to organize your application's logic and data. It makes state changes predictable and easier to debug. For large applications with complex state, it can be an invaluable tool.

Use Redux or React Context to manage the data flow between components and control the state of the application.

Now, let's test your understanding of these core principles.

Quiz Questions 1/5

What is the primary problem in React that state management libraries like Redux are designed to solve?

Quiz Questions 2/5

Which of the following are the three core parts of the Redux architecture?

By centralizing your application's state, Redux helps create applications that are easier to test, maintain, and reason about.