Web Dev Roadmap for Beginners (Free!): https://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: https://bit.ly/WebDevMaster
- Master the Coding Interview: https://bit.ly/FAANGInterview
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

Subscribe https://bit.ly/3nGHmNn

Course Updates https://courses.davegray.codes/

Questions - Please post them to my Discord https://discord.gg/neKghyefqh

Buy Me A Coffee https://www.buymeacoffee.com/davegray

Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

All Resources for this Typescript Course: https://github.com/gitdagray/typescript-course

Playlist for this Typescript Course: http://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: https://youtu.be/EfAl9bwzVZk

React Hooks tutorials:
useState: https://youtu.be/yvTGXH7uybA
useEffect: https://youtu.be/j3vk0FW71DM
useCallback: https://youtu.be/FB_kOSHk1DM
useMemo: https://youtu.be/oR8gUi1LfWY
useRef: https://youtu.be/s6UAuFzL308
useReducer: https://youtu.be/26ogBZXeBwc

Tutorial References:
TypeScript + React Cheatsheet: https://github.com/typescript-cheatsheets/react
React Official Website: https://reactjs.org/
Typescript Official Website: https://www.typescriptlang.org/
Anders Hejlsberg, Creator of Typescript and C# Interview: https://dev.to/destrodevshow/typescript-and-c-both-created-by-the-same-person-named-anders-hejlsberg-42g4
Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/#technology-most-popular-technologies
MDN - Static Typing: https://developer.mozilla.org/en-US/docs/Glossary/Static_typing
MDN - Dynamic Typing: https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing
MDN - Type Coercion: https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion
TS Type Assertions: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions

Web Dev Tools:
Vite: https://vitejs.dev/
Chrome Browser: https://www.google.com/chrome/
Visual Studio Code (VS Code): https://code.visualstudio.com/
Node.js & npm: https://nodejs.org/
Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Was this React Hooks + Typescript useReducer tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#usereducer #react #typescript