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

[@zhou7yuan]

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] features/counter/counter-slice.ts [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) [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] features/dogs/dogs-api-slice.ts `createAPI` [1:06:55] store.ts [1:14:20] reducer & middleware features/dogs/dogs-api-slice.ts [1:17:32] export generated hook App.tsx [1:19:07]

[@Kenai_BR]

Thank you for taking your time doing this.

[@sitodavid2437]

Thank you@@Kenai_BR

[@jesulonajoshua8775]

Thank you

[@koko0808008]

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

[@nichaphatraithipphikun8098]

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

[@TheReadWellPodcast]

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

[@yehoriliushchenko4401]

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

[@mariolazzari]

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

[@mqasim7206]

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

[@banalola]

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

[@satyaranjannayak1361]

I always had hard times understanding modern redux, thanks to you and Mark, I finally understood the whole base concept. Keep up the good work 👍👍

[@romanjs4909]

hooks generation is DOPE. I'm in!

[@stevenquintana8937]

Finally I can understand pretty well redux toolkit

[@ajithsimon]

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

[@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!!

[@hugoforte]

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

[@n.y.synytskyi1118]

A great episode, thank Erik and Jason!

[@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?

[@ryanocampo7465]

at 50:52 can anyone explain the dispatch usage here? Currently I get prompt that dispatch does not take arguments, line 12 of the click handler function in app tsx in vod

[@ryanocampo7465]

EDIT: hooks, I forgot the complete type casting of dispatch, added empty parenth at the end

[@PeterKellner99]

I'm trying to understand the "optional add on" comment for RTK Query. I looked on the toolkit page and I could not figure out how much the optional add on costs. Is it all open source, or is there a financial model someplace in here to pay for the dev work?

[@brandon-t7s]

By 'you don't pay for it' - he meant pay for it as in you won't increase the bundle size from the import unless you choose to use RTK Query, not with real money haha.

[@markerikson3383]

Hah, I meant "pay" as in "your JS bundle gets larger when you import this" :) All the Redux packages are 100% open-source _and_ free-to-use monetarily

[@TheKeyboardKnight]

@@markerikson3383 I did the same, lol. The reason I was searching for a paid version is not only the comment but also that when I use createApi from the "optional add-on" I get typescript error because it returns me an object of type any. When I import it from ""@reduxjs/toolkit/query" I get the Api type of object but the hooks are missing. TS version is 5.1.6 What should I do to get this working ?

[@bogdantimchenko4829]

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.

[@adobehex6116]

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

[@BobbyBundlez]

that's vite for ya lolol

[@furciorifa]

I never imagined that a Jason teach me how to retrieve JSON lol

[@sayandcode]

The fact that this video is not on the top of the search results for redux is criminal

[@rakeshpk4991]

Thank you two. This is very helpful!!!

[@claudiutamas79]

Finally, I understood this! Thanks!

[@danceharborhub]

Amazing video, thank you!!

[@rafahadenkar]

Everything is a (Gangsta)state management library until the real Gangsta(Redux Toolkit) comes out.

[@ZeTaKevin]

Hi!, What is the font you use in your vscode?

[@learnwithjason]

Operator Mono jason.af/uses

[@sattukishore3280]

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

[@nikoman71326]

this is GOLD!

[@MarvFitness]

This is gold right here......eureka

[@harishpatidar8888]

which font you are using in code editor?

[@learnwithjason]

Operator Mono! My setup is here: jason.af/uses

[@afifikani]

@@learnwithjason Ok, Operator Mono is the best thing I found this year. thanks for that!

[@marcelorojas4079]

Great and clear, thanks guys

[@shubhamlaad885]

nice demo

[@SteffanBoodhoo]

some of these increments are great but my God the createApi seems like a ridiculous pain, especially in an app where say I have to make ~30-50 different API calls

[@shyambihariswami8250]

RTX is not working with `2.0.0.beta.0`

[@cgnguyen2857]

awesome tut

[@aldobangun223]

what a great content here. Terima Kasih

[@shineLouisShine]

Awesomely elegant.

[@bharatm3653]

captions don't sync with video. please correct it

[@learnwithjason]

new captions syncing now :)

[@leevitammelin1795]

I thought it was a hoax, but everything works!

[@mpoisot]

Extremely useful! Thank you both so much. But I can't stand all the popups from the live audience. I found it very distracting.

[@andreiKspb]

thank you

[@Lafsha]

so helpful

[@abanoubharby1655]

AMAAAZINGG

[@BobbyBundlez]

holy shit. redux toolkit has immer built in?!!

[@piyushaggarwal5207]

I will answer a question anywhere I find a text box 😆

[@joydeepbhowmik6181]

Can we please make it a little bit harder for the beginners.PLEASE

[@g_a_m_b_e_t_t_o_r8920]

Super !

[@eghishemanukyan3021]

great

[@poem-shorts]

why cant there just be a store as an object and just store.counter +=1 and when we want do store.counter tf is all this stupid complexity

[@maykefernandesdossantos7374]

the only annoying thing about this video is the guys talking about things like data request cache like if it was such a new thing... maybe to Redux but not to other state managers libs haha "wait why it didnt fetch again?" Come on man hahaha

[@biancamagali100]

hey! why are they using /next and not the normal npm i @reduxjs/toolkit/next?

[@markerikson3383]

Because when we made this video, RTK Query was not fully finished. It was only available in preview releases of Redux Toolkit, published to NPM under an `@next` tag. We later published RTK 1.6.0, which was the first release that officially included RTK Query, and all versions of RTK since then have the RTK Query pieces included.