Learn useReducer with Typescript + React Hooks

Publié le: 16 décembre 2022
sur la chaîne: Dave Gray
22,474
725

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 ➜   / discord  

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

👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray  
LinkedIn:   / davidagray  

🔗 All Resources for this Typescript Course: https://github.com/gitdagray/typescri...

🔗 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:    • JavaScript Full Course for Beginners | Com...  

📚 React Hooks tutorials:
🔗 useState:    • Avoid this React State Mistake | React Pre...  
🔗 useEffect:    • React useEffect Hook tutorial | Learn ReactJS  
🔗 useCallback:    • useCallback STOPS this React MISTAKE | use...  
🔗 useMemo:    • useMemo Explained | React Hooks useMemo Tu...  
🔗 useRef:    • BUILD a React Timer with useRef | React Ho...  
🔗 useReducer:    • useReducer is BETTER than useState | React...  

📚 Tutorial References:
🔗 TypeScript + React Cheatsheet: https://github.com/typescript-cheatsh...
🔗 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/typescri...
🔗 Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/...
🔗 MDN - Static Typing: https://developer.mozilla.org/en-US/d...
🔗 MDN - Dynamic Typing: https://developer.mozilla.org/en-US/d...
🔗 MDN - Type Coercion: https://developer.mozilla.org/en-US/d...
🔗 TS Type Assertions: https://www.typescriptlang.org/docs/h...

⚙ 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/...

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

#usereducer #react #typescript


Sur cette page du site, vous pouvez voir la vidéo en ligne Learn useReducer with Typescript + React Hooks durée online en bonne qualité , qui a été Téléchargé par l'utilisateur Dave Gray 16 décembre 2022, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 22,474 fois et il a aimé 725 téléspectateurs. Bon visionnage!