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!
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!
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
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
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.
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.
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?
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
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.
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
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
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 :)
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.
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?
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)
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.
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.
@@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)
@@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
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)
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.
you passed an empty object ,{} as the 2nd argument in the createStore() funciton. But is this the right thing to do. When i am coding in javascript i only pass 2 argument to this function. the reducer and the middleware. I never pass 3. so why do i have to pass this extra {} when i code in typescript??
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 :(
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"
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".
hmm ... (src/state/reducers/bankReducer.ts) ... default: // slove Error: The slice reducer for key "bank" returned undefined during initialization. return state
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
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 ?
This works for me: import {compose} from "redux" compose( (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__() )
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:)
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
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.
I had to import as legacy_createStore since createStore is deprecated. Someone said to learn redux without toolkit but man, its kind of a pain in the ass lmao
on 25:46 you use default Disptach type, which not include thunk type so avoid this using, AppDispatch = typeof store.dispatch.
Your channel is a hidden gem. So many cool topics you cover. Don't stop grinding you're gonna blow up.
The quality is actually so freaking good :)
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!
I came from vue world and I'm able to digest this content really easily, thanks.
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!
Would you be able to create a crash course on using React Redux Typescript to build an Electron app?
Thanks for the kind comments. Honestly, don't know any Electron, but if I learn it, I'll make a video about it.
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
29min in and just wow 😲 typescript is a bit tricky. This clears things up
Woah ❤️ this video is awesome, happy that you didn't start explaining what Redux is in this video again 😄
Amazing guide. Really helpful to understand how redux works with react and typescript. Thank you!
The best redux tutorial I have seen (I saw many!). You got a new subscriber.
This was a perfect refresher I wish I could like and sub multiple times. Thank you!!!!
Nice video, now I understand react and redux with typescript
This video helped me complete the test assignment get my first job 😅
I just starting learning react and redux. your videos are great!
Thanks a lot dude! Documentations and articles makes it so complicated but you made it so simple
very well explained....please bring one project with react - redux with typescript.
Yes, I would love to see this. Would pay money also
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
For #2, you can but should you?
@@Anothy why not?
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.
Thank you very much. First tutorial that actually works, and it was with typescript! very clear explanation of everything...
Thanks very much, I used this to refresh my react types experience, very clear.
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.
Thanks, for this tutrial looking forward to sagas as thunk can be a pain in some situations.
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?
Thanks! Pretty good video, I like how you explain the material.
Good tutorial. I suggest your next tutorial would be react-redux typescript using redux toolkit.
if you do a e-commerce project with TS + react + redux would be amazing
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
This is hlp full for begginer Thank You So Much ::))
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.
I have a Nest crash course that uses TypeScript to create a REST API
Another very useful tutorial.Thank you! You are a great instructor!
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
Great tutorial! Liked and subbed! (Please do a long video on a big scale project for Redux Typescript)
Man, Thank you so much. It's so helpful me, Thank for this content.
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
@28:18 Its still not catching the error for bankrupt .. since bankrupt should not have any payload.. how can this be fixed?
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 :)
Thanks for the video. Did you ever create a part 2 to this video ? I couldnt seem to find one
Serious awesome and I loved way of explanation is good 👏.
awesome video my friend :D thank you
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.
react-thunk gave me dependency issues, redux-thunk worked..thanks
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?
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)
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.
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.
You're a gem 💎! Thanks a lot man! 🤩
Wonderful video ! Please can you do a crash course for API framework
Like Express JS?
@@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)
@@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
This video is a treasure 🪙
Concise and informative.
Thank you so much.
I can't find the next video when you get this app to work. Can you display a link to it? Thank you.
Thank you for the tutorial! you rock!
Many thanks!
Good tutorial.
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)
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.
you passed an empty object ,{} as the 2nd argument in the createStore() funciton. But is this the right thing to do. When i am coding in javascript i only pass 2 argument to this function. the reducer and the middleware. I never pass 3. so why do i have to pass this extra {} when i code in typescript??
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 :(
do you have a resource for that?
Would you recommend passing your dispatch down into your components whenever your setting up your app with someone like react router dom?
Redux - axios - typescript, I hopefully you will do that! Thanks before
Hello, sorry for my english, im french developer, very good tutorial ! ty
Don't worry ur English is good
Algo comment, i'll watch later
Thank you for this tut!
very informative. thank you!
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.
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"
good explanation
createStore is deprecated for learning purposes use import { legacy_createStore as createStore } from "redux";
This should be pinned
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".
hmm ... (src/state/reducers/bankReducer.ts)
...
default: // slove Error: The slice reducer for key "bank" returned undefined during initialization.
return state
Thank you so much for this course, Can you please Make a new Redux with Typescript for eCommerce store?
that is just beautiful
This video is great ... 😀😀
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
Thank you ليث حرب
l love your content !!! keep on going , please ...
thanks for the tutorial. can you make Redux saga..
Hey thanks a lot bro. What pattern are we using here with action-types, actions and reducers folders?
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 ?
This works for me:
import {compose} from "redux"
compose(
(window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__()
)
Great explanation.
hi, please the repository
Good stuff man.
is there any git repo for this?
learn a lot. thank you.
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:)
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
I have this error too
can you make nuxt ts vuex vue 3?
redux toolkit and react query with typescript(?)
laith you thanks a lot mate
Thanks for making video
Can you make one video redux saga
great tutorial
Nice!! Thank you
will be great to know how to add redux dev tool
why not redux toolkit tho ?
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.
great video..
Best one!!!
createStore is not working
I had to import as legacy_createStore since createStore is deprecated. Someone said to learn redux without toolkit but man, its kind of a pain in the ass lmao
Thanks for this
Hey. thank u so much
You put reactnative with typescript projects more 🙏🙏🙏🙏
Thank you :)
thanks a lot
I didnt see you are using typescript anymore...
thanks!!
way underrated video