Redux Fundamentals (feat. React)
Learning Paths:
Topics:
Table of Contents
Introduction
Redux Without React
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
Connecting Redux into React
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.
Redux Dev Tools
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.
Connecting State Hooks to the 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.
Connecting Increment & Decrement
Steve 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 Exercise
Students are instructed to implement the SetCounter form to update the state.
Dispatching from Forms Solution
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.
Binding Actions
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
Connect API vs Hooks
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.
mapStateToProps & Connect API
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.
mapDispatchToProps
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.
Connect API & mapDispatchToProps Exercise
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.
Connect API & mapDispatchToProps Solution
Steve live codes the solution to the Connect API & mapDispatchToProps exercise.
Updating Item Data
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.
Updating Item Data Exercise
Students are instructed to implement the ability to update an item's quantity.
Updating Item Data Solution
Steve live codes the solution to the Updating Item Data exercise.
Deriving Data
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
Computing Data with Reselect
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.
Computing Data Exercise
Students are instructed to implement the total for each menu item.
Computing Data Solution
Steve live codes the solution to the Computing Data exercise.
Immer
Mutable State with Immer
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.
Immer Exercise
Students are instructed to implement Immer to mutably update the quantity of an item.
Immer Solution
Steve live codes the solution to the Immer exercise.
Redux Toolkit
Redux Toolkit & State Slices
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.
Creating a Slice of State
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.
Create a Slice Exercise
Students are instructed to create a slice for adding humans using the Redux tool kit.
Create a Slice Solution
Steve live codes the solution to the Create a Slice exercise.
Slice Actions & Creating Actions
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.
Extra Reducers
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
Async Thunks with React Toolkit
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.
Async Thunk Data Fetch Exercise
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.
Async Thunk Data Fetch Solution
Steve live codes the solution to the Async Thunk Data Fetch exercise.
