Temporal
Redux Fundamentals (feat. React)
4 hours, 41 minutes
CC
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
CloseWhat They're Saying
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
Edwinpgm
Thank you Frontend Masters & Steve Kinney for this awesome course State Management with Redux. Finally got confident with Redux.
Sandeep Ranjan
sandeepranjan_
Course Details
Published: June 15, 2021
Learning Paths
Topics
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: 6 minutes
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
Students are instructed to create an enhancer that console logs the state before and after the reducer is called.
Steve live codes the solution to the Enhancers exercise.
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,
Students are instructed to reconfigure the previously created performance enhancer into middleware.
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
Steve walks through binding Redux into a React application including: creating a reducer, actions, createStore, and connecting the react-redux provider. Once Redux is bound to the React application the state can be used and manipulated.
Steve demonstrates how to install the Redux developer tools with the React application and describes the functionality that comes with it. The Redux developer tools adds extra functionality to allow developers to see what is going on in the Redux store.
Steve demonstrates implementing a selector hook to pull data from the Redux state into the React application. A demonstration of viewing actions in the Redux dev tools and connecting the reset button to the store is also covered in this segment.
Steve walks through connecting the increment and decrement buttons to the Redux store and discusses various situations where Redux store may not be necessary.
Students are instructed to implement the SetCounter form to update the state.
Steve live codes the solution to the Dispatching from Forms exercise. A student's question regarding if subscribe could be used for the input instead of useEffect are also covered in this segment.
Steve demonstrates binding actions with bindActionCreators and a custom hook to automatically dispatch the functions when called. Using a custom hook to bind actions allows for easier migration if moving from Redux.
Connecting Redux to React
Section Duration: 58 minutes
Steve discusses the benefits and drawbacks of using the Connect API compared to hooks and provides examples of situations where each could be used. The Connect API wraps presentational components in a higher order component with state and actions.
Steve demonstrates how to use mapStateToProps and reducers to pull and map objects from the Redux store instead of having a hard coded initial state. A common issue with hot module loading not recognising a change the module tree to trigger reloading is also covered in this segment.
Steve demonstrates using mapDispatchToProps to pass dispatch in to the container connect. To simplify mapDispatchToProps the function can be passed an object and automatically form a dispatch.
Students are instructed to create a container for the individual menu item and be able to pass it the ability to remove an item from the menu.
Steve live codes the solution to the Connect API & mapDispatchToProps exercise.
Steve walks through implementing the ability to update an item price and returning the updated array using plain JavaScript. The array of objects cannot be mutated and has to be returned as a brand new array.
Students are instructed to implement the ability to update an item's quantity.
Steve live codes the solution to the Updating Item Data exercise.
Steve walks through computing and deriving data without storing data in state using mapStateToProps. The mapStateToProps function can take in props as arguments and return a newly computed value while avoiding storing extra data in state.
Selectors and Reselect
Section Duration: 13 minutes
Steve demonstrates creating selectors to pull specific data from a large store tree and allow for more code flexibility if the shape of the state tree changes. The createSelector method takes two arguments an array of functions and a function to pass the array through.
Students are instructed to implement the total for each menu item.
Steve live codes the solution to the Computing Data exercise.
Immer
Section Duration: 12 minutes
Steve demonstrates how to use Immer to treat immutable objects as mutable without actually mutating the objects. Immer provides a draft version of the specified immutable object for developers to change and figures out how to change the object without mutating state.
Students are instructed to implement Immer to mutably update the quantity of an item.
Steve live codes the solution to the Immer exercise.
Redux Toolkit
Section Duration: 38 minutes
Steve discusses benefits and drawbacks of using the Redux Toolkit to including assisting with maintaining large applications and difficulty migrating to using Redux Toolkit with established applications. Redux Toolkit allows the creation of state slices which pull in actions, action creators, and reducers into a single abstraction.
Steve demonstrates how to use Redux Toolkit to create a slice of state using configureStore to apply a few starting middleware and connect the developer tools. The createSlice ability creates a slice of state to assist with state management.
Students are instructed to create a slice for adding humans using the Redux tool kit.
Steve live codes the solution to the Create a Slice exercise.
Steve demonstrates how to add actions and actionCreators to state slices using hooks. The ReduxToolkit actions use a different syntax from Redux and automatically generates the action type based on the name field and the reducer action.
Steve demonstrates creating and assigning extraReducers to slices of state. The extraReducers allows createSlice to respond to other action types besides the types automatically generated. Student questions regarding what the Redux Toolkit is doing in extraReducers and what types of things extraReducers can handle are covered in this segment.
Asynchronous Actions
Section Duration: 23 minutes
Steve demonstrates how to make API requests with vanilla JavaScript using createAsyncThunk and the fetch API. The createAsyncThunk function accepts a Redux action type string and a callback function and returns a promise.
Steve demonstrates how to add actions and actionCreators to state slices using hooks. The Redux Toolkit actions use a different syntax from Redux and automatically generates the action type based on the name field and the reducer action.
Steve live codes the solution to the Async Thunk Data Fetch exercise.
Wrapping Up
Section Duration: 14 minutes
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.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops