React Redux with TypeScript Crash Course - 2021

This is a 45-minute crash course aimed to teach you React Redux with TypeScript in great detail.
Second Channel:
/ @laiture123
Git Repo:
github.com/harblaith7/redux-w...
Timelines:
0:00 - Intro
1:25 - Create a TypeScript React App
2:57 - Typing Reducers
13:44 - Organizing Files
22:31 - Typing Action Creators
32:00 - Typing Dispatch

[@aeganaden]

Man, your channel deserves more subscribers. The level of clarity that you give deserves 10million subscribers. Anyways, I'm so glad that i discovered your channel, will support this channel always! Keep up the good work!

[@boswellorendain3355]

Thank you so much transitioning from react js w/ redux to react ts w/ redux had been hard but this video made everything clear. Very well put explaination and easy to understand :D

[@als5321]

Your channel is a hidden gem. So many cool topics you cover. Don't stop grinding you're gonna blow up.

[@RampageV1d30s]

Thanks a lot dude! Documentations and articles makes it so complicated but you made it so simple

[@sarcasticdna]

Woah ❤️ this video is awesome, happy that you didn't start explaining what Redux is in this video again 😄

[@MrAndykofi]

Thanks very much, I used this to refresh my react types experience, very clear.

[@arkmy]

The best redux tutorial I have seen (I saw many!). You got a new subscriber.

[@Balistick51]

Amazing guide. Really helpful to understand how redux works with react and typescript. Thank you!

[@spunk707]

Thank you very much. First tutorial that actually works, and it was with typescript! very clear explanation of everything...

[@sujantkumarkv5498]

The quality is actually so freaking good :)

[@lsowein]

Another very useful tutorial.Thank you! You are a great instructor!

[@itsmiemusic]

Thank you for you content--your channel's helped me SO much! Easy to follow and understand & very thorough 👏🏼 I've watch this video and the two others you recommended, and I'm blown away by how quickly I'm picking up what you're putting down! You're a great instructor, thanks again!

[@itsmiemusic]

Would you be able to create a crash course on using React Redux Typescript to build an Electron app?

[@laithacademy]

Thanks for the kind comments. Honestly, don't know any Electron, but if I learn it, I'll make a video about it.

[@ashwinnair9862]

Thanks, for this tutrial looking forward to sagas as thunk can be a pain in some situations.

[@nnamenearinze6086]

This was a perfect refresher I wish I could like and sub multiple times. Thank you!!!!

[@diegosk8bt]

I came from vue world and I'm able to digest this content really easily, thanks.

[@svetoslavivanov8871]

I just starting learning react and redux. your videos are great!

[@ahmedkrdzalic4425]

It would help a lot if you give us the GIT repository to have a reference when it comes to bug handling. Or maybe at the end of the tutorial, to show all code in a few seconds so we can see where we have made a mistake. Btw, thank you for this.

[@arcosd63]

Thanks! Pretty good video, I like how you explain the material.

[@iamaakashbasnet]

You're a gem 💎! Thanks a lot man! 🤩

[@fatihcamgoz]

Great tutorial! Liked and subbed! (Please do a long video on a big scale project for Redux Typescript)

[@hugo057855555]

Nice video, now I understand react and redux with typescript

[@dominiccohen7576]

Great tutorial thank you. Only question I have is about using index files for organisation. This is not the place for discussion about best practice naming conventions for Interfaces and their Implementations, or deep concepts of object orientation. Yet someone new to TS concepts may get more benefit if the interfaces were placed in a file named more appropriately, such as accountActionInterfaces or something similar.

[@codelightsparkles2403]

Thank you for the tutorial! you rock!

[@learnsmart1812]

Serious awesome and I loved way of explanation is good 👏.

[@user-ms4cs7vx9t]

This video helped me complete the test assignment get my first job 😅

[@xaxaFilms]

very informative. thank you!

[@andrzejsotnikow7494]

Thank you for this tut!

[@garikmelqonyan6011]

Many thanks! Good tutorial.

[@felipemiguel5581]

Man, Thank you so much. It's so helpful me, Thank for this content.

[@fares.abuali]

This video is a treasure 🪙 Concise and informative. Thank you so much.

[@mashoodkiyani3992]

that is just beautiful

[@jurajdurej]

awesome video my friend :D thank you

[@preciousbey]

29min in and just wow 😲 typescript is a bit tricky. This clears things up

[@khertgeverola175]

Good tutorial. I suggest your next tutorial would be react-redux typescript using redux toolkit.

[@codewithsandip8397]

This is hlp full for begginer Thank You So Much ::))

[@jaicarey7023]

Exceptional video mate! I was struggling with applying typing to redux, this was very helpful :) Edit: I will say I personally really dislike calling nearly every file index.ts, very easy to get lost in that kind of environment... But I do really like the way you implement redux as hooks? From the course I did I used the connect method and implement map state to props and map dispatch to props. I am tossing up which is easier to read.

[@melindamurillo4680]

Thanks for the video. Did you ever create a part 2 to this video ? I couldnt seem to find one

[@sohailhaqyar3949]

Good stuff man.

[@Julian-oy7dy]

This lecture helped me a lot. Thank you. I wish there was also a REST service course using TypeScript. This is the function for the client to log in to a specific admin page and modify personal information.

[@laithacademy]

I have a Nest crash course that uses TypeScript to create a REST API

[@rajnishkalwar3231]

Thanks for very informative video one of the best video on youtube...

[@ol1175]

Best one!!!

[@RAJUBHAI-ww7em]

laith you thanks a lot mate

[@skydivey]

Great explanation.

[@baiweichen7521]

learn a lot. thank you.

[@mmacuts7527]

Thanks for this

[@mariorios8827]

Nice!! Thank you

[@korndev6862]

great tutorial

[@captainprogramming]

Thanks for making video

[@TheMakeupmonika]

l love your content !!! keep on going , please ...

[@goranqaqnass5867]

Thanks!

[@IkraamDev]

Thank you ليث حرب

[@ameerhamza-pw1vq]

good explanation

[@SamyarBorder]

This video is great ... 😀😀

[@RavindraSingh-lp9pl]

great video..

[@davidho1258]

you dont need to import from /folder/index.ts. /folder would do. VScode will assume you want to import from the folder's index file instead of clicking to autofill imports, you can press tab or enter. You may have to change the settings in your VSCode. Add a selector to your store called bankSelector. export const bankSelector = (state: State) => state.bank

[@OSCAR-CH]

Hey thanks a lot bro. What pattern are we using here with action-types, actions and reducers folders?

[@shineLouisShine]

Teach me anything! ...Although, in this case, at the end of the video Some conclusion of the entire structure and flow of the app - Wouldn't be a mistake. Thanks a lot :)

[@bluediu1714]

Thank you :)

[@hasancheraghi2800]

Hey. thank u so much

[@Atif1702]

You are a mentor to me but just few points: 1. You don't need types for redux-thunk as Redux Thunk provides its own type definitions. 2. You can put the interfaces in "__.d.ts" files and you don't have to import or export it then

[@Anothy]

For #2, you can but should you?

[@Atif1702]

@@Anothy why not?

[@ankitvasita]

very well explained....please bring one project with react - redux with typescript.

[@LoveisHell85]

Yes, I would love to see this. Would pay money also

[@amjadshadid90]

thanks a lot

[@gozhira9520]

Awesome! Thank you for sharing, very useful, I only have one question, if i have more than one reducer what would be the file organization? Thanks.

[@137dylan]

You'd do the same thing and then import all reducers to the root reducer file where they're combined. Or you would use Redux Toolkit which solves this multiple reducer problem by creating "slices"

[@dennisgonzales9521]

thanks!!

[@mohammedjamal4759]

Thank you so much for this course, Can you please Make a new Redux with Typescript for eCommerce store?

[@sivsovanpanhavorn6296]

Awesome

[@EverAfterBreak2]

Algo comment, i'll watch later

[@rangabharath4253]

awesome

[@monkeystylle]

thanks for the tutorial. can you make Redux saga..

[@dylanstandridge3201]

Would you recommend passing your dispatch down into your components whenever your setting up your app with someone like react router dom?

[@andrewspatrick2452]

if you do a e-commerce project with TS + react + redux would be amazing

[@gagan987]

Yes please make a video of it because I'm try to use a action creator inside a action creator but I'm getting errors so please make a video about it. To give more detail about my problem I'm trying to build a todo app with redux and typescript so after updating (dispatch(updateTodo())) a todo what i would do without typescript is that i would call getTodos action creator (dispatch(getTodos())) which would fetch all the updated todos but with typescript I'm getting errors

[@romimaximus]

at 20:00, everytime that i install a package, than i have to install this "@types" also....? and does the typecript wesbite has a list of this packages ?.. by the way awesome tutorial, thank you

[@MohammadAApu]

how to dispatch multiple actions inside action creators in this way? like if I add new item then I would like to sum total (of those items) to a separate property in store)

[@Devilman91]

Hello, course is awesome but can you show or explain how to dispatch single action without bindActionCreators? In practice, in real projects dispatch is used by many components. thanks

[@RyanRhoades-gx4mc]

bit late to the party here but just wanted to check in. Is the possibly undefined error coming from making the payload optional rather than having a specific interface for each action type? When we make the payload optional, even with multiple interfaces, the possibly undefined error comes back. I am assuming due the possibility that now the payload may not be provided and would then cause the undefined error.

[@christahegedus332]

I can't find the next video when you get this app to work. Can you display a link to it? Thank you.

[@codewar6708]

on 25:46 you use default Disptach type, which not include thunk type so avoid this using, AppDispatch = typeof store.dispatch.

[@igdev6095]

Redux - axios - typescript, I hopefully you will do that! Thanks before

[@daakuish]

What if we want to export the actions constants as "export const DEPOSIT = 'deposit'" *instead of enum* and use as interface DepositAction { type: DEPOSIT, payload: number } If I do this, I get the error " 'DEPOSIT' refers to a value, but is being used as a type here".

[@surveillancecameratada63]

hmm ... (src/state/reducers/bankReducer.ts) ... default: // slove Error: The slice reducer for key "bank" returned undefined during initialization. return state

[@gandalfgrey91]

At 34:20 my app failed to launch, I've been following everything exactly up to that point, triple checking all my code with the github repo. I got a a few errors in console "Invalid Hook Call", "Cannot read properties of null (reading 'useMemo')" and "The above error occurred in the component: Provider". Anyone have any clue what issue I'm getting?

[@ZeeshanAli-kc3zc]

way underrated video

[@user-oh4xi2xb2d]

will be great to know how to add redux dev tool

[@Quicknuggets]

@28:18 Its still not catching the error for bankrupt .. since bankrupt should not have any payload.. how can this be fixed?

[@jeffgasparini5927]

Hello, sorry for my english, im french developer, very good tutorial ! ty

[@bloodzz4813]

Don't worry ur English is good

[@MrSociety404]

Wonderful video ! Please can you do a crash course for API framework

[@laithacademy]

Like Express JS?

[@MrSociety404]

@@laithacademy yes why not, I don't have any skills in this, I actually use a "API" with a php file to communicate with my database, so I want to learn something new and something good. (Sorry for my English I'm Belgian)

[@MrSociety404]

@@laithacademy I'm really interested to meet someone who have skills and who explained well like you, if you can please add me on discord, i'll will be glad, MrSociety404#5268

[@rodolforaquion166]

Just a question because I'm a newbie: Is this the traditional way of using react-redux? I've watched Mark Erikson's video about Redux and he's using reduxjs-toolkit. So I'm just curious if I'm following the "modern" way of doing react-redux. I've also noticed there are no slices created that's why I wondered.

[@CapeSkill]

This is a classic implementation of redux, but you can honestly use both. RTK(redux toolkit) eliminates a little bit of the boiler plate, but you can use this type of implementation in modern react applications as well to be honest.

[@DeepakGupta-pz4fx]

Can you make one video redux saga

[@marcinbaazy1692]

thanks! but why are you using redux-thunk in all actions? why not just return plain object instead of function with dispatch? is that something related with redux with ts?

[@137dylan]

You are correct there was no need to add the thunk middleware in this tutorial as the actions were synchronous. However the same template/architecture can be used for async calls, such as to an API or if using Firebase etc. (anything with promises)

[@saisashankchavaly2121]

is there any git repo for this?

[@designcoderdev3080]

can you make nuxt ts vuex vue 3?

[@macos-brasil1814]

great but sometimes (unless is a biiiiig project with many people on the team) its just too much creating functions to check the type of the type of the type of the type of the checker function that check the other functions which will check if you misstype "order" in the parameters.

[@tarekhammami2350]

Thank you very much for this video ! But, unfortunatly, I have a problem running Redux DevTools Chrome extension with this setup. Can anyone please suggest a solution ?

[@abdelnacerr]

This works for me: import {compose} from "redux" compose( (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__() )

[@pauljmorton]

So when I do that "npm install" stuff, is it redux-thunk or react-thunk? You say redux-thunk but you typed react-thunk. Your stuff installed fine with react-thunk. My stuff also installed fine even though I went with redux-thunk.

[@surajnair2617]

react-thunk gave me dependency issues, redux-thunk worked..thanks

[@clrbrk9108]

This is a great video and I learned a ton, but a fair warning to viewers: this is NOT modern Redux implementation. Which I learned the hard way during a code test written with modern Redux implementation :(

[@youneshenni5417]

do you have a resource for that?

[@rabiyabasri9276]

I have setup the redux by watching your video.. Could please tell where i should make api call.. I tried and made api call in action creator.. But in response i get function.. () {return dispatch (actionCreator.apply(this.arguments)) } Can provide a suggestion on how to make api and get response using redux with typescript:)

[@haroldmaussa]

hi, please the repository

[@028-manikandan3]

You put reactnative with typescript projects more 🙏🙏🙏🙏

[@ddikodroid]

redux toolkit and react query with typescript(?)

[@anabuch5986]

Thank for your video. I am having a compile error at "export * as actionCreators from './action-creators/index';" It seems to be a bug. I don't find the solution. The error is the following: You may need an additional loader to handle the result of these loaders

[@munteanuoctavian7797]

I have this error too