Let’s Learn Modern Redux! (with Mark Erikson) — Learn With Jason

A lot has changed in Redux since it was originally created. In this episode, Mark Erikson will teach us about Redux Toolkit an React-Redux hooks.

Links:

Credits:

[zhouyuan]

What is Redux & context [2:22]

[14:30]
Recommend hooks API as default [15:24]
`connect` difficult for TypeScript [16:31]

Redux Toolkit [18:16]

Where to go? [18:36]
pre-defined templates on create-react-app
Vite [19:30]

project start files [21:26]
dependencies [23:33]

features folder [25:00]
[25:48]
`createSlice` [27:25]
`Immer` package within for state updates [32:05]

redux store [35:20]
app/store.ts
configureStore with defaults: [36:10]
- Redux-Dev-Tools Extension
- Thunk middleware
types export [38:06]

main.tsx [40:15]
app/hooks.ts [42:40]
`useAppDispatch`
`useAppSelector`

App.tsx [46:30]

counterSlice.reducers.amountAdded(state, action: PayloadAction<number>) [53:00]

---

Docs: Writing Thunks [56:26]
`createAsyncThunk`
createSlice -> extraReducers [59:19]

---

Docs: RTK Query Overview [1:02:09]

Demo: Dogs as a Service data fetching [1:03:04]

`createAPI` [1:06:55]
store.ts [1:14:20]
reducer & middleware
[1:17:32]
export generated hook
App.tsx [1:19:07]

[koko]

Oh finally comments are available. This is video is really pure gold to get a good introduction to modern redux. It really helped me last year when i started a new job. Thank you Jason and Mark

[nichaphatraithipphikun]

This is extremely helpful for a newbie. It's great to see everything from the start with simple explanation to it. Great stuff!

[mqasim]

I really appreciate these methods! They're straightforward and easy to follow. Thanks

[TheReadWellPodcast]

This video was a game-changer! Thank you, gents.

[netkrash]

I was on the fence about createApi, the documentation is really intimidating but this explains it very well, thank you! this is so useful!!

[n.y.synytskyi]

A great episode, thank Erik and Jason!

[yehoriliushchenko]

such a good quality of content, and that is 2 years ago. You deserve more attention!

[hugoforte]

- thanks so much!!=) that was glorious - the short term caching at the end was gold=)

[rakeshpk]

Thank you two. This is very helpful!!!

[banalola]

One of the best tutorial on redux toolkit. Much appreciated!!

[mariolazzari]

This video is changing my life: redux toolkit is, nowadyes, the ultimate solution for handling you enitre application. Thanks so much guys!

[stevenquintana]

Finally I can understand pretty well redux toolkit

[romanjs]

hooks generation is DOPE. I'm in!

[ajithsimon]

Still wondering why you have installed axios! Thought you gonna do something with it instead of RTK Query!

[aldobangun]

what a great content here. Terima Kasih

[adobehex]

even on my weak computer the installation did not take much time, thank you very much

[bogdantimchenko]

I love it! Thanks, Guys for this video! I had an experience with redux before, then switched to GraphQl Apollo. There are a few similarities between both. But it is good progress for Redux.

[MrKhelkun]

I wonder about naming convention of the reducers and actions: in the video the reducers are named to the past "incremented" & "decremented" in the slice, so forth the actions are named the same. However it would sound more natural to me that the actions to be named "increment" & "decrement". So would you name your slice reducers to the past or present?

[sattukishore]

how can we get updated RootState if someone injecting reducer dynamically in run time for code splitting ?