How redux works in simple terms

If you’ve ever built a React app, you know that passing data between components can feel like playing a stressful game of "telephone." One component tells its parent, who tells the grandparent, who finally tells the cousin.

Redux fixes this by creating a "Single Source of Truth." Instead of data being scattered everywhere, it lives in one central vault.

The Redux Coffee Shop Analogy

To understand Redux, imagine a coffee shop:

The Store (The Vault): This is the giant ledger where the shop keeps track of everything: how many beans are left, the list of orders, and who is working.

The Action (The Customer's Order): A customer doesn't just walk behind the counter and grab a latte. They "order" it. An action is a plain object that describes what happened.

Example: { type: 'ADD_TODO', text: 'Buy Milk' }

The Reducer (The Barista): The barista is the only one allowed to update the ledger. They take the current state of the shop and the customer's order, then they create a new version of the ledger.

The Dispatch (The Cashier): The cashier takes your order and hands it to the barista. In Redux, dispatch is the function that sends your action to the store.

Seeing it in Code: A Simple Todo App

Let’s look at how this looks in a real JavaScript environment.

1. Define the Actions
   First, we define what can actually happen in our app. We want to add a task and toggle whether it's finished.
   

// Actions

const ADD_TODO = 'ADD_TODO';

const TOGGLE_TODO = 'TOGGLE_TODO';



// Action Creators

const addTodo = (text) => ({

  type: ADD_TODO,

  payload: { text, completed: false }

});

1. The Reducer (The Brain)
   The reducer decides how the state changes. Crucial Rule: Reducers never change the old state; they always return a brand new copy of it.
   

const initialState = [];



function todoReducer(state = initialState, action) {

  switch (action.type) {

    case ADD_TODO:

      // We return a NEW array with the old items + the new one

      return [...state, action.payload];



    case TOGGLE_TODO:

      return state.map((todo, index) => {

        if (index === action.index) {

          return { ...todo, completed: !todo.completed };

        }

        return todo;

      });



    default:

      return state;

  }

}

1. The Store (The Home)
   Finally, we bring it all together.
   

import { createStore } from 'redux';



const store = createStore(todoReducer);



// Let's add a todo!

store.dispatch(addTodo('Learn Redux today'));



console.log(store.getState()); 

// Output: [{ text: 'Learn Redux today', completed: false }]

Why go through all this trouble?

You might think, "Why not just use a simple variable?"

As your app grows to include login screens, shopping carts, and user profiles, having a predictable "Store" makes debugging a breeze. If something goes wrong, you can look at the history of Actions to see exactly when and why the data changed. It’s like having a "black box" flight recorder for your website.

Summary

Store: Where your data lives.

Action: A note saying what you want to change.

Reducer: The logic that performs the change.

Dispatch: The trigger that sends the note to the logic.

Happy coding! If you found this helpful, feel free to share it.