The Pillars of Redux: Store, Actions, and Reducers

Understand the three core concepts that make Redux a powerful and predictable state management library for any JavaScript app.

Welcome! Let's see how Redux manages state in a simple counter app.

// Initial State: { count: 0 }

The Store: Your App's Brain

The Store is the heart of Redux. It's a single, large JavaScript object that holds the entire state of your application. Think of it as your app's "single source of truth." Because all state lives in one place, it becomes predictable and easier to debug.

Actions: Events in Your App

An Action is a plain JavaScript object that describes an intention to change the state. It's the only way to send data from your application to the Redux store. Actions must have a type property, which is usually a string, like 'todos/addTodo'.

Reducers: Calculating State Changes

A Reducer is a pure function that specifies *how* the application's state changes in response to an action. It takes the previous state and an action as arguments, and returns the next state. It never changes the original state, but instead returns a new, updated state object.

The Result: One-Way Data Flow

These three pillars create a strict one-way data flow. An action is dispatched to the store. The store calls the reducer with the current state and the action. The reducer calculates the new state, and the store saves it. Your UI then re-renders based on this new state.

Practice Zone

Interactive Test 1: Match the Concept

Match each Redux concept to its correct description.

Arrastra en el orden correspondiente.

Arrastra las opciones:

(state, action) => newState

createStore(reducer)

{ type: 'INCREMENT' }

Completa el código:

Single source of truth______

Describes what happened______

Determines how state changes______

Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.

import { createStore } from 'redux';

function counterReducer(state = { value: 0 }, ) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    default:
      return state;
  }
}

let  = createStore(counterReducer);

store.({ type: 'INCREMENT' });

Unlock with Premium

Practice Example: Code Editor

Complete the `counterReducer` by adding a case for a 'DECREMENT' action that subtracts 1 from the state's value.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
}

Unlock with Premium

Knowledge Check

Which Redux principle dictates that state should never be changed directly (mutated)?

Unlock with Premium

Redux in Action

Redux provides a solid foundation for state management. Here's how its concepts translate into building robust React applications, especially with the help of the `react-redux` library.

1. Avoiding Prop Drilling

Without a state manager, you often pass props through many layers of components. Redux solves this by letting any component connect to the store and access the state it needs directly.

// In any component, deep in the tree:
import { useSelector } from 'react-redux';

function UserAvatar() {
  const username = useSelector(state => state.user.name);
  return <img alt={username} />;
}

This component gets `username` directly from the Redux store, no props needed!

2. Dispatching Actions from Components

To trigger state changes, components use the `useDispatch` hook to get the `dispatch` function and send actions to the store.

import { useDispatch } from 'react-redux';

function AddTodoButton() {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch({ type: 'todos/add', payload: 'New task' });
  }

  return <button onClick={handleClick}>Add</button>
}

3. Predictable Debugging

Because all changes happen through actions and pure reducers, debugging becomes much simpler. Tools like Redux DevTools allow you to "time travel," inspecting every action and the resulting state change.

// Redux DevTools Log

- @@INIT
- todos/add (payload: 'Learn Redux')
- todos/toggle (payload: {id: 1})
- user/login (payload: {name: 'Alex'})

Practical Takeaway: Redux provides a predictable architecture. By separating the "what happened" (actions) from the "how it changes" (reducers), you create applications that are easier to test, debug, and scale.

Redux Core Concepts Glossary

Store: The single object that holds the application's entire state tree. It is the "single source of truth."
Action: A plain JavaScript object that describes an intention to change the state. It must have a type property.
Reducer: A pure function (`(state, action) => newState`) that specifies how the state changes in response to an action.
Dispatch: The method on the Redux store used to send (or dispatch) an action. It is the sole trigger for a state change.
Pure Function: A function that, for the same input, always returns the same output and has no observable side effects. Reducers must be pure functions.