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