React Redux Example Project with Redux Toolkit

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn Redux Toolkit with this React Redux example project. This project will help you learn more about app structure and data flow with Redux Toolkit in React.js. This simple example app project will get you started.

⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React & Redux: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview

? Subscribe ➜ https://bit.ly/3nGHmNn

? React JS for Beginners full course - 9 hours: https://youtu.be/RVFAyFWO4go

? React Redux Toolkit tutorial series - https://www.youtube.com/playlist?list=PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo

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

? Source Code and Resources for this Redux Toolkit Series: https://github.com/gitdagray/react_redux_toolkit

React Redux Example Project with Redux Toolkit

(00:00) Intro
(00:15) Welcome
(00:28) Prerequisite knowledge
(00:45) Docs and Faster Pace
(01:13) Starter Code
(02:32) Create the posts slice
(03:45) Add postsReducer to the store
(04:30) PostsList component
(05:58) Create a posts selector
(07:29) Import PostsList into App.js
(08:34) postAdded reducer function
(09:46) Action creator functions are automatically generated
(10:12) Immer.js is active in createSlice
(11:14) AddPostForm component
(13:25) Saving a New Post
(17:08) Move state formatting to a prepare callback
(20:25) Redux Devtools
(22:20) Create a usersSlice
(23:36) Import the usersReducer into the store
(24:02) Modify the prepare callback in postsSlice
(24:30) Modify the AddPostForm component
(28:57) PostAuthor component
(30:28) Import PostAuthor into PostsList
(32:25) Install date-fns dependency
(33:10) Handling date data in postsSlice
(34:55) TimeAgo component
(36:18) Import TimeAgo into PostsList
(37:29) Display most recent post first
(39:02) Adding reaction data to the postsSlice
(41:30) ReactionButtons component
(43:39) Import ReactionButtons into PostsList

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

? General Redux Toolkit References:
? Official Site for Redux Toolkit: https://redux-toolkit.js.org/
? Redux Devtools: https://github.com/reduxjs/redux-devtools
? Immer.js: https://immerjs.github.io/immer/

? ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

? React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

? General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

Was this tutorial about building an example project with Redux Toolkit and React helpful? If so, please share. Let me know your thoughts in the comments.

#react #redux #example