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

Build a blog app project with React.js and Redux in this tutorial. We'll use a blog app project in React.js to provide CRUD examples in Redux Toolkit. We will create, read, update, and delete blog posts.

⭐ 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

Blog App Project with React.js, Redux Toolkit CRUD Examples

(00:00) Intro
(00:16) Welcome
(00:29) Prerequisite knowledge
(00:56) Starter Code Overview
(01:41) selectPostById selector
(03:04) SinglePostPage component
(05:06) Install React Router
(05:54) Applying React Router to index.js
(07:28) Layout component
(08:38) App.js Routing
(10:43) useParams in SinglePostPage
(11:48) PostsExcerpt component
(12:54) Testing Our Code
(13:40) Adding a Blog Header
(16:18) Adding an Edit Post link
(17:00) EditPostForm component
(21:24) updatePost async thunk
(22:38) builder case for updatePost
(24:46) Dispatching updatePost
(25:13) Routing for EditPostForm
(25:58) Testing updatePost
(27:13) deletePost async thunk
(29:13) builder case for deletePost
(30:14) Dispatching deletePost
(31:59) useNavigate in AddPostForm
(32:43) Testing All CRUD Operations
(34:13) updatePost fix for fake API testing
(36:38) Verifying reaction names
(37:49) Loading API posts data at app load

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/

React Router v6 References:
Official Site for React Router: https://reactrouter.com/docs/en/v6
React Router v6 Tutorial: https://youtu.be/XBRLVRjZ3CQ

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 a Blog App Project with React and Redux Toolkit helpful? If so, please share. Let me know your thoughts in the comments.

#blog #react #redux