Redux & Redux Toolkit
/Intermediate
API Calls with Redux
Definition
The architectural pattern of keeping API communication logic out of React components and encapsulating it entirely within Redux Thunks or RTK Query.
Explain Like I'm New
Don't write `fetch()` or `axios.get()` directly inside your React `useEffect`. It makes the components messy and hard to test. Move the `fetch()` into a Redux Thunk. Your React component should just look like `useEffect(() => { dispatch(fetchData()) })`.
Real World Example
A Dashboard component that just dispatches `fetchDashboardMetrics()`. It doesn't know or care what URL is being hit, what tokens are being sent, or how the data is parsed. It just dispatches the action and waits for the Redux state to update.
Common Use Cases
- •Separation of Concerns
- •Clean React components
Interactive Example
Loading...
Console output will appear here...
Interview Questions
basic
- Should you put `axios` calls inside your React components or inside Redux Thunks?
intermediate
- What is the modern RTK alternative to writing manual Thunks for API calls?