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
10 ай бұрын
Thank you@@Kenai_BR
@jesulonajoshua8775
2 ай бұрын
Thank you
@koko0808008
2 жыл бұрын
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
@TheReadWellPodcast
2 жыл бұрын
This video was a game-changer! Thank you, gents.
@nichaphatraithipphikun8098
Жыл бұрын
This is extremely helpful for a newbie. It's great to see everything from the start with simple explanation to it. Great stuff!
@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 👍👍
@mqasim7206
Жыл бұрын
I really appreciate these methods! They're straightforward and easy to follow. Thanks
@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!
@banalola
9 ай бұрын
One of the best tutorial on redux toolkit. Much appreciated!!
@ajithsimon
2 жыл бұрын
Still wondering why you have installed axios! Thought you gonna do something with it instead of RTK Query!
@stevenquintana8937
Жыл бұрын
Finally I can understand pretty well redux toolkit
@n.y.synytskyi1118
Жыл бұрын
A great episode, thank Erik and Jason!
@MrKhelkun
3 ай бұрын
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?
@hugoforte
2 жыл бұрын
Niiiiiice - thanks so much!!=) that was glorious - the short term caching at the end was gold=)
@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!!
@romanjs4909
Жыл бұрын
hooks generation is DOPE. I'm in!
@furciorifa
19 күн бұрын
I never imagined that a Jason teach me how to retrieve JSON lol
@rakeshpk4991
Жыл бұрын
Thank you two. This is very helpful!!!
@nikoman71326
Ай бұрын
this is GOLD!
@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
5 ай бұрын
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.
@claudiutamas79
Жыл бұрын
Finally, I understood this! Thanks!
@adobehex6116
2 жыл бұрын
even on my weak computer the installation did not take much time, thank you very much
@BobbyBundlez
Жыл бұрын
that's vite for ya lolol
@danceharborhub
8 ай бұрын
Amazing video, thank you!!
@marcelorojas4079
Жыл бұрын
Great and clear, thanks guys
@SteffanBoodhoo
2 ай бұрын
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
@mukurpuri4966
2 жыл бұрын
Everything is a (Gangsta)state management library until the real Gangsta(Redux Toolkit) comes out.
@mpoisot
2 жыл бұрын
Extremely useful! Thank you both so much. But I can't stand all the popups from the live audience. I found it very distracting.
@MarvFitness
Жыл бұрын
This is gold right here......eureka
@shineLouisShine
7 ай бұрын
Awesomely elegant.
@aldobangun223
2 жыл бұрын
what a great content here. Terima Kasih
@shubhamlaad885
2 жыл бұрын
nice demo
@cgnguyen2857
Жыл бұрын
awesome tut
@sattukishore3280
Жыл бұрын
how can we get updated RootState if someone injecting reducer dynamically in run time for code splitting ?
@ZeTaKevin
Жыл бұрын
Hi!, What is the font you use in your vscode?
@learnwithjason
Жыл бұрын
Operator Mono jason.af/uses
@shyambihariswami8250
Жыл бұрын
RTX is not working with `2.0.0.beta.0`
@abanoubharby1655
Жыл бұрын
AMAAAZINGG
@Lafsha
10 ай бұрын
so helpful
@andreiKspb
Жыл бұрын
thank you
@harishpatidar8888
2 жыл бұрын
which font you are using in code editor?
@learnwithjason
2 жыл бұрын
Operator Mono! My setup is here: jason.af/uses
@afifikani
2 жыл бұрын
@@learnwithjason Ok, Operator Mono is the best thing I found this year. thanks for that!
@sayandcode
Жыл бұрын
The fact that this video is not on the top of the search results for redux is criminal
@bharatm3653
2 жыл бұрын
captions don't sync with video. please correct it
@learnwithjason
2 жыл бұрын
new captions syncing now :)
@leevitammelin1795
2 жыл бұрын
I thought it was a hoax, but everything works!
@joydeepbhowmik6181
11 ай бұрын
Can we please make it a little bit harder for the beginners.PLEASE
@BobbyBundlez
Жыл бұрын
holy shit. redux toolkit has immer built in?!!
@g_a_m_b_e_t_t_o_r8920
2 жыл бұрын
Super !
@piyushaggarwal5207
Жыл бұрын
I will answer a question anywhere I find a text box 😆
@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.
Пікірлер: 63