Learn useReducer with Typescript + React Hooks

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn useReducer with Typescript + React Hooks in this React + TS tutorial. useReducer is a replacement for the useState React hook, and is often used with more complex state. Learn how to provide types for a reducer function, actions, and more.
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: bit.ly/WebDevMaster
- Master the Coding Interview: bit.ly/FAANGInterview
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 All Resources for this Typescript Course: github.com/gitdagray/typescri...
🔗 Playlist for this Typescript Course: bit.ly/3GcNJ78
Learn useReducer with Typescript + React
(00:00) Intro
(00:08) Welcome
(00:30) Starter Code Review
(02:45) What is useReducer?
(03:30) Define initial state
(03:51) Reducer Action Type: enum or object?
(04:58) type ReducerAction
(05:37) reducer function
(08:38) Refactoring from useState to useReducer
(11:18) Adding a Payload
📚 Suggested Pre-requisites for this Typescript course:
🔗JavaScript for Beginners full course: • JavaScript Full Course...
📚 React Hooks tutorials:
🔗 useState: • Avoid this React State...
🔗 useEffect: • React useEffect Hook t...
🔗 useCallback: • useCallback STOPS this...
🔗 useMemo: • useMemo Explained | Re...
🔗 useRef: • BUILD a React Timer wi...
🔗 useReducer: • useReducer is BETTER t...
📚 Tutorial References:
🔗 TypeScript + React Cheatsheet: github.com/typescript-cheatsh...
🔗 React Official Website: reactjs.org/
🔗 Typescript Official Website: www.typescriptlang.org/
🔗 Anders Hejlsberg, Creator of Typescript and C# Interview: dev.to/destrodevshow/typescri...
🔗 Stackoverflow Survey Results: survey.stackoverflow.co/2022/...
🔗 MDN - Static Typing: developer.mozilla.org/en-US/d...
🔗 MDN - Dynamic Typing: developer.mozilla.org/en-US/d...
🔗 MDN - Type Coercion: developer.mozilla.org/en-US/d...
🔗 TS Type Assertions: www.typescriptlang.org/docs/h...
⚙ Web Dev Tools:
🔗 Vite: vitejs.dev/
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Node.js & npm: nodejs.org/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
Was this React Hooks + Typescript useReducer tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#usereducer #react #typescript

[@mickmister]

Instead of doing `payload ?? ''`, what do you think about using explicit types for each action? Something like: type NewInputAction = { type: NEW_INPUT, payload: string, } type IncrementAction = { type: INCREMENT, } type ReducerAction = NewInputAction | IncrementAction const reducer = (state: ReducerState, action: ReducerAction) => { That way you can keep honest the actions coming in, and ensure that the proper payload is being provided for each action type. Also, I've used Redux but I actually haven't used useReducer before. It seems like it may be a good solution to handle form data with several fields? I wonder how to properly typescript that use case.

[@k303k]

I can understand it clearly. Thank you Dave!

[@ichiroutakashima4503]

Hey, Dave. I've found your channel through Free Code Camp and I really have to thank you because I've learned a lot through your channel especially on hard topics like recursions, Callbacks and closures. I really appreciate your time making these videos and I hope you could hear my request. I would like to request your time to make some content regarding JavaScript Unit Testing with Jest. There really isn't that much content and most content around it seems to be only focused on React but not on JavaScript itself. I hope you'll hear me out. Thanks.

[@DaveGrayTeachesCode]

Great request! And thank you!

[@eduardohernandez552]

I really enjoyed this tutorial, thank you Dave, excellent content.

[@7doors847]

🔥Congratulations on the 💯k Subs! 🙌 (Well deserved IMO) Wishing everybody happy holidays 🎄

[@DaveGrayTeachesCode]

Thanks! You too!

[@shivamvijaywargi]

Can't wait to see what GEM💎 you'll have for us next.

[@DaveGrayTeachesCode]

Thank you!

[@abdulazeez.98]

Awesome video as always 👍 Typescript is awesome on the frontend. Recently I have been learning to implement it on the backend. But it doesn’t have that much support (especially with ORMs).

[@DaveGrayTeachesCode]

Thank you!

[@Echiduna]

Great content! Thank you, Dave!

[@DaveGrayTeachesCode]

You're welcome!

[@Salah-YT]

thank u so much hope you have a great year 2023 and happy new year 🙂

[@DaveGrayTeachesCode]

Thank you! You too!

[@sushilbalami]

You always put great content 😮

[@DaveGrayTeachesCode]

Thanks! 💯

[@MOJICA7257]

Thanks Dave, Good Job as always :)

[@DaveGrayTeachesCode]

You're welcome!

[@TravinskiyVladislav]

Thank you, Dave

[@DaveGrayTeachesCode]

Welcome!

[@aaymankhalid9997]

hey @Dave Gray,trying to understand the useReducer hook. but I am getting stuck at the type ChildrenType = {children : (num : number) => ReactNode}. is this a function? Why do we need it ?

[@TheOneHong]

Can’t wait for context, need that for my project

[@DaveGrayTeachesCode]

🚀🚀

[@Grishopping]

Gracias Dave

[@DaveGrayTeachesCode]

De nada 😀

[@LeonardoSeptianDwigantoro]

hi, awesome video! btw what theme do you use for your vs code?? thank you

[@DaveGrayTeachesCode]

Thanks! Github theme

[@beeboylinux7524]

Hey Dave. Good job 👌. You're the best .

[@DaveGrayTeachesCode]

Thank you! 🚀

[@harag9]

Great video, thanks. I'm getting use to react and the other hooks so trying to sink my teeth into the useReducer. I've been given a project a work which I'm taking over from some contract workers they have had, and it's a mess. then basically have one component and define 100's of useState and pass them down to each component, about 20 to each, depending on the area of the application. this reducer stuff would have made it look nicer and more manageable. Thanks for sharing this, it will be very useful.

[@KristianTheDesigner]

Great tutorial. Is there any particular reason why you create the Reducer Action Types in all caps? Is it just for us viewers to understand it better and have a better visual representation? Or is it somewhat related to good coding practice?

[@harag9]

It's more to do with coding practice. I do mainly C# and would type the enum out as normal PascalCase, yet other devs on the team prefer that horrible shouty capitals. I personally hate it as it detracts from the rest of the code on the page. I do see it in caps more by those that do javascript these days., but it's really up to you on which way you like, especially of you're solo and not in a team.

[@hosamgnaba3205]

thank you sir

[@DaveGrayTeachesCode]

Most welcome!

[@dzhaniivanov5837]

i don't find starter code u have branch only with finished ?

[@DaveGrayTeachesCode]

The link in the description goes to course resources. The starter code is the code from the previous chapter. I _think_ I said this in the video, but apologies if I did not.

[@dirkbirot2155]

Hello do you know a y good tutorial or resources too help me with VS code it's really slowing me down

[@DaveGrayTeachesCode]

Yes, here is a link to the best VS Code course I know of: bit.ly/3SYKcwE

[@surajambekar6324]

Hello sir, I am learning MERN stack using free youtube content. I am about to complete my front-end part and I was thinking after doing front-end I will start finding internship but there is one problem or opportunity I can say that my college has conducted a workshop so there is one company who is gonna give us internship for 6 moths on Node js. So my question is could please give me an advise that should i take this opportunity or after completing front-end I should apply for front-end?

[@DaveGrayTeachesCode]

Sounds like a great opportunity to gain some real experience! Also, Node.js is still JavaScript so you will continue to improve many skills that can translate back to frontend in the future. 💯

[@surajambekar6324]

@@DaveGrayTeachesCode Thank you sir, so I will take this opportunity. Thank you for teaching us.😇

[@learn029]

Can you please make basic to advanced level git and GitHub Tutorials!

[@DaveGrayTeachesCode]

Great request!

[@imonutiy]

Hey Dave. There is no starter code for this lesson, both in lesson 13, 14 and 15. You should probably structure you files as lesson 1 - starter and finished and so on. This is what I have seen most online and is less confusing to work with.

[@DaveGrayTeachesCode]

Sometimes I do, but often I just provide the finished code. You can start a new project from scratch fairly easily.

[@willyhorizont8672]

🚀🚀🚀🚀

[@DaveGrayTeachesCode]

🙏💯🚀

[@saeedkhazalvand4821]

Dave! I couldn join you in discord cause I live in IRI and as you know maybe our Internet services is horrible. I need your consultant tooo much,

[@DaveGrayTeachesCode]

Sorry to hear that! Ask questions on a video if you cannot join Discord, but sometimes KZbin hides comments and questions and I don't see them.

[@ubitubee]

One thing I don't understand: the general advice is use Context with a grain of salt, only if necessary, and don't abuse it. One the other hand, the general advice is use reducers instead of state, and of course, put them inside context. So, which is right? What is good practice here?

[@DaveGrayTeachesCode]

As you said, it is all general advice that you have read. I can't comment on their advice - whoever it is - but my general thoughts: 1) If your state is really simple, just useState. 2) Ok, your app is getting bigger - now a reducer and context might make sense.

[@ubitubee]

@@DaveGrayTeachesCode Thanks for tip, Dave. I guess my confusion is, in the context (ha!) of a reducer, it is OK to use context. At least, that's the conclusion I'm able to draw.

[@ubtonai.online7988]

Please course React with javascript

[@DaveGrayTeachesCode]

React is JavaScript. If you look on my channel page you will find courses on React and JavaScript. 👀

[@ubtonai.online7988]

@@DaveGrayTeachesCode i think your react course not for beginners. React zero to hero full course. Thanks. Your tech technology wonderful

[@DaveGrayTeachesCode]

@@ubtonai.online7988 it is for React beginners, but you should learn HTML, CSS, and JavaScript before React. I have courses on my channel for all of these.

[@ubtonai.online7988]

@@DaveGrayTeachesCode Thank you