Redux & Redux Toolkit
/Beginner
Redux Data Flow
Definition
The specific unidirectional lifecycle of data in a Redux application: UI triggers an Action, Action is Dispatched to the Store, Reducer calculates new state, UI reads new state and re-renders.
Explain Like I'm New
1. You click 'Deposit $10'. 2. An Action `{type: 'DEPOSIT', amount: 10}` is created. 3. The Dispatcher throws that Action into the Reducer. 4. The Reducer does the math: `Old Balance ($50) + Action ($10) = New Balance ($60)`. 5. The Store saves $60. 6. The UI sees the $60 and updates the screen.
Real World Example
Ordering an Uber. You tap 'Request' (Dispatch Action). The Uber server receives your request and assigns a driver (Reducer updates State). Your phone screen updates to show the driver's car on the map (UI Re-renders).
Common Use Cases
- •Debugging where data is failing to update
Architecture & Flow
Interactive Example
// The complete lifecycle in 4 steps: // 1. Initial State let state = { count: 0 }; // 2. User clicks a button in the UI, creating an ACTION const action = { type: 'INCREMENT' }; // 3. The REDUCER receives the current state and the action function reducer(state, action) { if (action.type === 'INCREMENT') return { count: state.count + 1 }; return state; } // 4. The STORE updates the state, and the UI re-renders with { count: 1 } state = reducer(state, action);
Interview Questions
basic
- What is the only way to trigger a state change in Redux?
intermediate
- Can a Reducer trigger an API call to fetch data?