Temporal
Advanced Redux with Redux Toolkit
3 hours, 51 minutes
CC
Course Description
Redux is one of the most popular and battle-tested state management libraries. Then Redux Toolkit (RTK) standardizes the best ideas from the Redux community to enable you to write more performant and maintainable Redux at scale. In this course, you'll use Redux Toolkit to simplify reducer logic and actions, use TypeScript with Redux, add tests, and use RTK Query to fetch data in real-world projects.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
This course was great at showing how you don't need to do it all yourself! It’s nice to lean on the tools people build. Thanks for sharing Steve 🙌
Rory
bronz3beard
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 8 minutes
Steve Kinney begins the Advanced Redux course by talking through some of the production challenges developers face with state management. The course projects are introduced, and links to each repository are provided.
Redux Toolkit
Section Duration: 55 minutes
Steve introduces Redux slices. The createSlice method accepts an initial state, an object of reducer functions, and a slice name. Action creators and action types corresponding to the reducers and state are automatically generated.
Steve uses the createAction helper method to combine the declaration of an action type and an action creator. The action creator can be called with or without arguments or with a payload attached to the action.
Students are instructed to refactor the counter.ts file to use the createAction method. Use the create-action-exercise branch to begin. The solution for this exercise can be found on the create-exercise-solution branch.
Steve demonstrates how the createReducer helper method simplifies the process of creating reducers. Builder callback functions that define the cases for each action are passed to the reduce. Mutable operations can be performed on the state object because the underlying libraries create a "WriteableDraft" of the state.
Students are instructed to use createReducer for the decrement and reset actions. Use the create-reducer-exercise branch to begin. The solution can be found on the create-reducer-solution branch.
Typed Hooks
Section Duration: 1 hour, 31 minutes
Steve switches back to the Super Tasker application to demonstrate how to add a store with Redux Toolkit. The configureStore method applies the tasksReducer to the store. A Provider is then wrapped around the Application component.
Steve uses Partial Types to eliminate TypeScript errors for missing properties and keep business logic inside the reducer and away from the view layer. Partial Types make all properties optional. A utility function is used to hydrate the missing properties on an object before it's pushed into the state.
Steve uses Utility Types to demonstrate an alternative method for handling incomplete data. A RequireOnly type is created with TypeScript generics. The resulting type allows required properties to be specified and any remaining types to be optional
Steve demonstrates one method for adding type support to the useSelector Hook. An ApplicationState type is declared and exported from the store. The drawback to this approach is the type must be imported anywhere the useSelector hook is used.
Steve demonstrates an alternate approach for adding type support to the useSelector hook. A custom hook for useSelector is created and typed using the TypedUseSelectorHook utility type.
Steve adds type support to the useDispatch hook. A custom hook is created to apply the type. The Redux DevTools extension is also demonstrated in this lesson.
Students are instructed to implement the User Slice. To begin the exercise, check out the user-slice-exercise branch. The solution can be found on the user-slice-solution branch.
Steve writes unit tests for testing slices in the application. The slice methods are imported. The initial state is defined, and the actions in each slice are tested.
Steve uses the extraReducers property to add dependent actions to a slice. This is useful for clean-up tasks such as removing any items associated with a user when the user account is removed.
Asynchronous Requests
Section Duration: 1 hour, 6 minutes
Steve introduces creatAsyncThunk, a function that accepts a Redux action type string and a callback function that should return a promise. The thunk action creator it returns can be used by the extraReducers builder in a slice.
Steve handles the pending state for the asynchronous request. A loading property is added to the state. The builder adds the additional case to the extraReducers property.
Steve creates a useTasks custom hook that returns the array of Tasks and a boolean value representing whether or not the data is loading. This hook is added to the TaskList component, and the loading property is bound to the Loading component.
Steve wires up RTK Query in the packing list application. An API service is created with the createService method, and a builder object is passed to the endpoints property to establish the server methods. A store is configured, and the new API service is concatenated to the default middleware.
Steve demonstrates the custom hooks that Redux Toolkit automatically generates from services created with the createAPI method. This makes it possible for the service to be integrated with a Redux application or agnostically with any other infrastructure.
Wrapping Up
Section Duration: 9 minutes
Steve wraps up the course by summarizing the strategies covered throughout the course and sharing some advice for incorporating Redux into existing applications. Strategies for integrating TypeScript into existing codebases are also discussed.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops