Play all

Intro

Welcome

Prerequisite knowledge

Docs and Faster Pace

Starter Code

Create the posts slice

Add postsReducer to the store

PostsList component

Create a posts selector

Import PostsList into App.js

postAdded reducer function

Action creator functions are automatically generated

Immer.js is active in createSlice

AddPostForm component

Saving a New Post

Move state formatting to a prepare callback

Redux Devtools

Create a usersSlice

Import the usersReducer into the store

Modify the prepare callback in postsSlice

Modify the AddPostForm component

PostAuthor component

Import PostAuthor into PostsList

Install date-fns dependency

Handling date data in postsSlice

TimeAgo component

Import TimeAgo into PostsList

Display most recent post first

Adding reaction data to the postsSlice

ReactionButtons component

Import ReactionButtons into PostsList

Description:

Learn Redux Toolkit through a hands-on React Redux example project. Explore app structure and data flow while building a simple application. Start with creating a posts slice and adding it to the store. Implement a PostsList component and create a posts selector. Add functionality to save new posts using a prepare callback. Utilize Redux Devtools for debugging. Create a users slice and modify the posts slice to include user data. Implement PostAuthor and TimeAgo components to display post metadata. Add reaction functionality to posts and create a ReactionButtons component. Follow along to gain practical experience with Redux Toolkit in a React.js environment.

React Redux Example Project with Redux Toolkit

Dave Gray

Add to list

#Programming #Programming Languages #Javascript #Redux #Redux Toolkit #Web Development #Computer Science #Selectors