Advanced Redux with Redux Toolkit

Steve Kinney

Steve Kinney

Temporal
3 hours, 51 minutes CC
Advanced Redux with Redux Toolkit

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
Close

Course Details

Published: February 7, 2023

Learning Paths

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 8 minutes
  • Introduction
    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
  • Create Slice
    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.
  • Create Action
    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.
  • Create Action Exercise
    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.
  • Create Reducer
    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.
  • Create Reducer Exercise
    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

Asynchronous Requests

Section Duration: 1 hour, 6 minutes

Wrapping Up

Section Duration: 9 minutes
  • Wrapping Up
    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.
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

Rory

bronz3beard

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now