Redux Fundamentals (feat. React)

Steve Kinney

Steve Kinney

Temporal
4 hours, 41 minutes CC
Redux Fundamentals (feat. React)

Course Description

Redux makes it easy to add scalable, production-ready state management into your web applications. You’ll commonly find Redux in many medium-to-large React applications. In this course, you’ll start by learning pure Redux fundamentals from scratch and move onto learning to hook Redux into a React application. Then you’ll learn to extend Redux with various tools from its ecosystem, including Reselect, Immer, and Redux Toolkit, to reduce boilerplate and speed up your development!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: June 15, 2021

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: 6 minutes
  • Introduction
    Steve Kinney introduces the course by providing an overview of the course, discussing what is contained in the Redux API, and answers some student questions. Student questions regarding where things like useReducer are, why to use Redux and not just React, and what is the difference between Redux and the context API are also covered in this segment.

Redux Without React

Section Duration: 1 hour, 16 minutes
  • Redux API's & Compose
    Steve discusses the methods of the Redux API including applyMiddleware, compose, combineReducers, bindActionCreators, and createStore. A demonstration of using compose to combine functions into a single function is also covered in this segment.
  • Redux Stores & Reducers
    Steve demonstrates creating a simple reducer, using the createStore method, and discusses the parts of the createStore method including getState and replaceReducer. A reducer will take in state and action as arguments and return the new state.
  • Redux Stores & Dispatch
    Steve discusses the dispatch part of createStore and demonstrates the conventions of action types. Student questions regarding why types are all uppercase and what are reasons to not use the Redux toolkit are also covered in this segment.
  • Action Creators
    Steve demonstrates creating an action creator function which will set a constant value to an action object that can be used instead of repeatedly writing the full action. Using helper functions can help reduce code repetition by avoiding repeatedly typing out the entire object and errors due to typos.
  • Setting initalState
    Steve demonstrates binding the initalState to the reducer to allow an immediate starting value for action. A students question regarding what happens if there are multiple parties to keep track of in state is also covered in this segment.
  • Some Rules for Reducers
    Steve discusses some rules to keep in mind when creating reducers in Redux including no mutating objects, always return something, it's just a JavaScript function, and reducers prefer flat objects. Students questions regarding if it makes sense to have multiple stores and how to manage a deeply nested object from an API are also covered in this segment.
  • Subscribe & Binding Action Creators
    Steve demonstrates how to use store.subscribe to store changes to the state and bind action creators to the dispatch to automatically call dispatch. A student's question regarding how to know what values have changed when using a subscriber is also covered in this segment.
  • Combine Reducers
    Steve demonstrates refactoring the application into multiple smaller reducers and using combineReducers to combine the smaller reducers to use in createStore. Reducers can be nested in combineReducer to help compartmentalize a program's actions. A student's question regarding if different reducers change the same property is also covered in this segment.
  • Enhancers
    Steve demonstrates adding an enhancer to createStore which will allow the creation of reusable Redux plugins that can be passed into the store. A student's question regarding if the role of an enhancer is similar to middleware is also covered in this segment.
  • Enhancers Exercise
    Students are instructed to create an enhancer that console logs the state before and after the reducer is called.
  • Enhancers Solution
    Steve live codes the solution to the Enhancers exercise.
  • Middleware
    Steve discusses using middleware to manage actions as they flow through the reducers and using applyMiddleware to compose a chain of middleware. Student questions regarding why the enhancer is being passed through itself,
  • Middleware Exercise
    Students are instructed to reconfigure the previously created performance enhancer into middleware.
  • MIddleware Solution
    Steve live codes the solution to the Middleware exercise and gives a brief summary of the rest of the course.

Hooking It Up With React

Section Duration: 37 minutes

Connecting Redux to React

Section Duration: 58 minutes

Selectors and Reselect

Section Duration: 13 minutes

Immer

Section Duration: 12 minutes

Redux Toolkit

Section Duration: 38 minutes

Asynchronous Actions

Section Duration: 23 minutes

Wrapping Up

Section Duration: 14 minutes
  • Wrapping Up
    Steve wraps up the course by answering student questions including if there are standard loading events, what happens with dispatches and the redux-observable plugin, and what are some opinions on libraries that say to build your own abstraction. Student questions regarding what the best solutions for managing state are and if mono repos are good to use for micro frontend architecture are also covered in this segment.
If you want to learn about Redux, it is a great course to start. You will learn about:
- Redux APIs
- Redux with React
- Redux Toolkit
👌
Edwin Gonzales Melquiades

Edwin Gonzales Melquiades

Edwinpgm

Thank you Frontend Masters & Steve Kinney for this awesome course State Management with Redux. Finally got confident with Redux.
Sandeep Ranjan

Sandeep Ranjan

sandeepranjan_

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