Redux Fundamentals (feat. React)
Table of Contents
IntroductionSteve 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
Redux API's & ComposeSteve 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 & ReducersSteve 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 & DispatchSteve 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 CreatorsSteve 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 initalStateSteve 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.
Subscribe & Binding Action CreatorsSteve 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 ReducersSteve 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.
EnhancersSteve 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 ExerciseStudents are instructed to create an enhancer that console logs the state before and after the reducer is called.
Enhancers SolutionSteve live codes the solution to the Enhancers exercise.
MiddlewareSteve 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 ExerciseStudents are instructed to reconfigure the previously created performance enhancer into middleware.
MIddleware SolutionSteve live codes the solution to the Middleware exercise and gives a brief summary of the rest of the course.
Hooking It Up With React
Connecting Redux into ReactSteve 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.
Redux Dev ToolsSteve 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.
Connecting State Hooks to the StoreSteve 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.
Connecting Increment & DecrementSteve walks through connecting the increment and decrement buttons to the Redux store and discusses various situations where Redux store may not be necessary.
Dispatching from Forms ExerciseStudents are instructed to implement the SetCounter form to update the state.
Dispatching from Forms SolutionSteve 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.
Binding ActionsSteve 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
Connect API vs HooksSteve 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.
mapStateToProps & Connect APISteve 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.
mapDispatchToPropsSteve 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.
Connect API & mapDispatchToProps ExerciseStudents 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.
Connect API & mapDispatchToProps SolutionSteve live codes the solution to the Connect API & mapDispatchToProps exercise.
Updating Item Data ExerciseStudents are instructed to implement the ability to update an item's quantity.
Updating Item Data SolutionSteve live codes the solution to the Updating Item Data exercise.
Deriving DataSteve 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
Computing Data with ReselectSteve 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.
Computing Data ExerciseStudents are instructed to implement the total for each menu item.
Computing Data SolutionSteve live codes the solution to the Computing Data exercise.
Mutable State with ImmerSteve 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.
Immer ExerciseStudents are instructed to implement Immer to mutably update the quantity of an item.
Immer SolutionSteve live codes the solution to the Immer exercise.
Redux Toolkit & State SlicesSteve 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.
Creating a Slice of StateSteve 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.
Create a Slice ExerciseStudents are instructed to create a slice for adding humans using the Redux tool kit.
Create a Slice SolutionSteve live codes the solution to the Create a Slice exercise.
Slice Actions & Creating ActionsSteve 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.
Extra ReducersSteve 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.
Async Thunk Data Fetch ExerciseSteve 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.
Async Thunk Data Fetch SolutionSteve live codes the solution to the Async Thunk Data Fetch exercise.
Wrapping UpSteve 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.