𝗛𝗼𝘄 𝗥𝗲𝗱𝘂𝘅 𝗪𝗼𝗿𝗸𝘀 𝗶𝗻 𝗦𝗶𝗺𝗽𝗹𝗲 𝗧𝗲𝗿𝗺𝘀
Passing data between React components often feels like a game of telephone. You pass data from a parent to a child to a grandchild. This becomes messy as your app grows.
Redux solves this. It creates a single source of truth. Instead of scattered data, everything lives in one central vault.
Think of a coffee shop to understand Redux.
The Store (The Vault) This is the ledger for the shop. It tracks bean counts, orders, and staff lists.
The Action (The Order) A customer does not grab a latte from the counter. They place an order. An action is a simple object that describes what happened. Example: { type: 'ADD_TODO', text: 'Buy Milk' }
The Reducer (The Barista) The barista is the only person who updates the ledger. They take the current state and the new order. They then create a new version of the ledger.
The Dispatch (The Cashier) The cashier takes your order and gives it to the barista. Dispatch is the function that sends your action to the store.
Why use Redux?
As your app expands to include user profiles or shopping carts, a central store makes debugging easy. You can look at your action history to see when and why data changed. It acts like a flight recorder for your website.
Summary:
• Action: A note describing a change. • Reducer: The logic that performs the change. • Dispatch: The trigger that sends the action to the logic.
Source: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp