React Redux Toolkit with TypeScript

[@BusinessWolf1]

> makes tutorial > doesn't explain shit > shows what to do not why amazing.

[@abhimanranaweera1695]

Great tutorial. Thank you so much! I followed the tutorial and try this myself and found 2 issues on the code. 01. We need to wrap the App component using provider and pass the store.. ( anyway your git code this was fixed) 02. Since you have used a form element for add component need to prevent default behaviour since it refresh with submission. I handed it by e.preventDefault in onSubmit. (Anyway your git repo you have used a div instead of a form) This is great tutorial and cleared my few doubts. Thanks again!

[@maksymdudyk1718]

Thank you for providing github repository for this tut of yours.

[@SakuraDev]

You are welcome!

[@a_maxed_out_handle_of_30_chars]

simple and to the point, thank you :)

[@SakuraDev]

You're welcome!

[@rohitghosh4625]

Using forms in the Add.tsx was making the whole page to reload... so here you can just remove the or change it to normal div component :)))

[@Grane00]

your typing speed is amazing

[@SakuraDev]

😊

[@Reaper_f30]

this was such a great, last time i used redux was 2 years ago with angular work app, redux has come so far, using react and mobx state tree at work, but going to switch us to redux see how much its reduced in boilerplate and makes use of hooks.

[@aleksandarmihaylov6884]

Do you have a video how to createAsyncThunk using middleware with react, redux toolkit and typescript ?

[@sdfsdfsdffdsfsdfsd123]

can you please share link for next video with sync method? Great video !!!

[@SakuraDev]

Hi, here is the link to async thunks: kzbin.info/www/bejne/p5bHlKhvitZ7sNk

[@liamkao1653]

its took me 1hr to find the bug: when I click "Add" button and get a page reload, the reason is you should not use "" at Add component, you need just use "" ...., at 8:55

[@noir4356]

Thank you for this comment, it just saved me that one hour !

[@kyoshinoda2214]

alternative solution: Inside the form add the attribute onSubmit={(event) =>{event.preventDefault()}} this prevents the form from being submitted hence rendering the page propertly. But a div is a way faster and easier solution

[@blackmagic9921]

Many thanks, btw what is your font. It look better than the one i'm currently using

[@SakuraDev]

Hi, 👋 Thanks 🙏. The theme is the bearded theme and the font is jetbrains

[@JnDv777]

Nice tutorial, thanks bro!!!!

[@SakuraDev]

Thank you for your kind words and support! I'm pleased to hear that you found my tutorial informative and helpful. I'll keep working hard to create tutorials that meet your needs and deliver value to my subscribers.

[@okbaalla8451]

P.E.R.F.E.C.T ❤❤❤❤❤ thanks a lot!

[@ДанилДмитриев-я5м]

you helped me, thanks

[@SakuraDev]

Glad I could help

[@prokhorov_sergey_igorevich]

So useful, thank you!

[@SakuraDev]

thanks🌷 I am glad it was helpful for you

[@NikosCGGICarried]

what is your vcode color theme?

[@SakuraDev]

Hi, One Dark Pro

[@sekhar6753]

what is the difference between useSelector and useAppSelector ?

[@SakuraDev]

Hi, useAppSelector is a custom hook that is specifically designed to be used with Redux Toolkit. It is a wrapper around useSelector that provides type safety for your selectors. This means that it will help you to avoid errors by ensuring that the data you are selecting from the store is of the correct type.

[@sekhar6753]

@@SakuraDev ok thanks for responding

[@jayzg60]

You forgot to include an essential step which is wrapping the app component in the index.tsx with a provider/ Something like this on your index.tsx: import { Provider } from 'react-redux' import { store } from './Store/store'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( );

[@SakuraDev]

Oh did I?

[@ashwinpatidar2878]

Nice explanation.

[@SakuraDev]

Glad you liked it

[@mystory5328]

Thanks your content. Can you make a big project based on typescript redux toolkit.

[@mystory5328]

@@SakuraDev thanks a lot. I am looking forward of your typescript toolkit project 😀.

[@mystory5328]

@@SakuraDev yes, you can add some features to make the project bigger or follow the amazon features.

[@fuad2069]

Thank you for the video

[@jasmeetsonu2902]

Appreciated Thanks

[@SakuraDev]

🌹🙏

[@kimhwanhoon]

thank you !

[@SakuraDev]

Thanks, I hope it was helpful for you

[@waynemutai3341]

Thank You So Much!!

[@_kenabey_]

Great!

[@SakuraDev]

🙏

[@maskman4821]

Sir, you should introduce Zustand to people, because it is way so easy to use than redux, no boilerplate, easy to read and understand, we only need to deal with state(variable) and action/function, straight to the point, it doesn't make sens to use redux/redux toolkit to make life tough😅

[@shebeeradimaly6125]

can you make in react native typescript....?

[@martapfahl940]

At least this counts for me: I want to learn what I will need in my first Junior Dev Job, not what is most convenient for me ;)

[@shebeeradimaly6125]

good ..thanks

[@junsgk]

Who is using redux in 2023.

[@SakuraDev]

Hi, in fact I am using Zustand in my last real world project and I am happy with that. But as of 2023, many top companies and organizations still use Redux in their projects. Redux provides a predictable and centralized way to manage application state, making it easier to debug and maintain large codebases. It also has a vibrant community and plenty of learning resources available online.

[@mjunaid3037]

thnk you

[@HousseinDroubi-o9i]

Hey

[@grebnik89]

It doesn't work in july 2024

[@SakuraDev]

I will update the video soon