Redux & Redux Toolkit
/Intermediate
Flux Architecture
Definition
An application architecture devised by Facebook for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. Redux is inspired by Flux.
Explain Like I'm New
Before Flux, data in apps flowed in every direction like a bowl of spaghetti (Two-Way Data Binding). Changing a model updated a view, which updated another model, causing an infinite loop. Flux enforces a strict ONE-WAY street: Action -> Dispatcher -> Store -> View.
Real World Example
A restaurant. You (View) cannot walk into the kitchen and grab food (Store). You must give an order (Action) to the Waiter (Dispatcher). The waiter gives it to the kitchen, and the kitchen brings the food back out to you. Traffic only flows one way.
Common Use Cases
- •Understanding the historical context of Redux
- •Designing predictable UIs
Terminal Output
bash / terminal
/*
The Flux Unidirectional Flow:
[ VIEW ] (User clicks a button)
│
â–¼
[ ACTION ] (An object describing what happened: { type: 'CLICK' })
│
â–¼
[ DISPATCHER ] (The traffic cop that sends the action to the stores)
│
â–¼
[ STORE ] (Updates the data, then tells the view to re-render)
│
â–¼
[ VIEW ] (UI updates!)
*/
Interview Questions
basic
- Does data in Flux flow in one direction or two directions?
intermediate
- How does Redux differ from the original Facebook Flux architecture?