Taking A Closer Look
- Handling Async Tasks With Redux
- Where To Put Your Code
- The Redux DevTools
Side Effects, Async Tasks & Redux
Reducers must be pure, side-effect free, synchronous functions!
Where should side-effects & async tasks be executed?
→ Inside the components (e.g., via useEffects())
→ Inside the action creators
Frontend Code Depends on Backend Code
Fat Reducers vs Fat Components vs Fat Actions
Where should your logic (=code) go?
Synchronous, side-effect free code
(i.e. data transformations)
- Prefer reducers
- Avoid action creators or components
Async code or code with side-effects
- Prefer action creators or components
- Never use reducers!
A Problem with useEffect()
We face one problem when using useEffect the way we currently do it: It will execute when our app starts.
Why is this an issue?
It's a problem because this will send the initial (i.e. empty) cart to our backend and overwrite any data stored there.
What is a “Thunk”?
Thunk: A function that delays an action until later.
An action creator function that does NOT return the action itself
but instead another function which eventually returns the action.
The Redux DevTools