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

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn to build a blog application using React.js and Redux Toolkit in this comprehensive tutorial. Explore CRUD (Create, Read, Update, Delete) operations through practical examples. Begin with an overview of the starter code and dive into implementing key components like SinglePostPage and PostsExcerpt. Install and apply React Router for seamless navigation. Develop essential features including a blog header, edit post functionality, and an EditPostForm component. Master async thunks for updatePost and deletePost operations, and learn to dispatch these actions effectively. Test your implementation thoroughly, covering all CRUD operations. Fine-tune the application by fixing API-related issues and verifying reaction names. Conclude by implementing data loading from an API at app initialization.

Syllabus

Intro
Welcome
Prerequisite knowledge
Starter Code Overview
selectPostById selector
SinglePostPage component
Install React Router
Applying React Router to index.js
Layout component
App.js Routing
useParams in SinglePostPage
PostsExcerpt component
Testing Our Code
Adding a Blog Header
Adding an Edit Post link
EditPostForm component
updatePost async thunk
builder case for updatePost
Dispatching updatePost
Routing for EditPostForm
Testing updatePost
deletePost async thunk
builder case for deletePost
Dispatching deletePost
useNavigate in AddPostForm
Testing All CRUD Operations
updatePost fix for fake API testing
Verifying reaction names
Loading API posts data at app load