Redux & Redux Toolkit
/Beginner
React Redux Data Flow
Definition
The complete, circular lifecycle of an event originating from a React UI, passing through Redux, and resulting in a UI update.
Explain Like I'm New
User clicks a button -> `useDispatch()` fires an Action -> The Store catches it -> The Reducer does the math and updates the State -> `useSelector()` notices the State changed -> The React Component automatically re-renders with the new data.
Real World Example
Adding a song to a playlist. Click '+' -> Dispatch `ADD_SONG` -> Reducer pushes song to array -> Sidebar re-renders showing 1 new song.
Common Use Cases
- •Understanding the big picture architecture
Terminal Output
bash / terminal
/*
THE REACT-REDUX CIRCLE OF LIFE:
1. [VIEW] React Component renders using initial state.
â–²
│ (Re-renders via useSelector)
│
4. [STORE] Updates state and alerts subscribers.
â–²
│ (Calculates new State)
│
3. [REDUCER] Looks at current State + Action.
â–²
│ (Sent via useDispatch)
│
2. [ACTION] Created when user clicks a button.
*/
Interview Questions
basic
- Who initiates the Redux Data Flow?
intermediate
- If you dispatch an action, but the UI doesn't update, what is the most likely cause?