Table of Contents
Introduction
Introduction
Steve Kinney introduces the course on Redux & MobX by giving an overview of what the course will cover and argues for the value in improving the state management of an application.Pure & Impure Functions
Steve explains the meaning of pure and impure functions in terms of a function's side effects, and relates this to the mutation of objects and arrays in JavaScript.Copy Instead of Mutate
Steve discusses methods of obtaining immutable data structures, including libraries, object methods, and array methods.Single State Store & Reducers
Steve introduces the single state store in Redux, a JavaScript object which contains the application's state and is modifiable through the usage of functionally pure reducers.
Redux Functions
Redux Functions Overview
Steve gives an overview of Redux functions and then gives a demonstration of using the compose function to combine functions together.reducer & createStore
Steve writes code to demonstrate usage of createStore by passing it a basic reducer. Then, the keys on the store are viewed and a basic event is passed through the dispatch method.Store dispatch & subscribe
Steve demonstrates usage of the dispatch and subscribe methods by using dispatch to pass events to the store's reducer function, and subscribe to view the changed state after each event dispatch. An example reducer is rewritten to remove impurities.combineReducers
Steve explains the purpose of combineReducers, and describes how it enables breaking up functionality into manageable pieces by pairing reducers with the state object.bindActionCreators
Steve uses bindActionCreator to bind a function that creates "add" actions to the store's dispatch method to reduce unnecessary complexity when dispatching actions to the store.Middleware in Redux
Steve discusses what middleware is and how an application can benefit from having it. Then, an example is given of how analytics middleware was applied to resolve a real world situation.
Redux & React
Create Redux Store
Steve creates the Redux implementation for a provided counter application using the react-redux library, addresses criticisms with Redux, and discusses ways to prevent errors when using strings in an application.Connect Redux to React
Steve demonstrates how to hook up the Redux store with React components by using a Provider component and the connect method along with mapping functions to map state and dispatch to properties.Redux Reducer Exercise & Solution
Students are instructed to implement the decrement functionality of the counter, and then Steve live codes the solution to the exercise.Refactoring an App to Use Redux
Steve breaks down factors in deciding whether or not to use Redux in an application and introduces the section on normalizing data.Implementing a Kanban Board
Steve introduces the next course project, creating a Redux implementation of a kanban board. The Normalizr library, which will be used throughout the project, is also introduced.State Store Schema
Steve uses Normalizr to create the state store schema for the kanban board, describing how to transform the data using the schema and normalize functions in a way that most effectively enables access to users and cards.Wiring State Store to the App
Steve wires the state store to the application by passing the store into React, creating a list reducer, creating a combined reducer which will contain branches for lists, users, and cards, and adding react-redux Provider tags.Redux DevTools
Steve uses the Redux Dev Tools uses extension to view information specific to Redux, including actions, the current state, and a timeline of events that occurred on the page.Using State Store in Components
Steve modifies the kanban board to include the Redux state store in its components by creating containers for the group of lists and the individual lists, and then swaps the components into the application.Wiring Redux to a React App Exercise
Students are instructed to create a card reducer, hook it into the combine reducer function, and swap out the card component with the card container component.Wiring Redux to a React App Solution
Steve live codes the solution to the exercise.Implementing Map Dispatch to Props
Steve enables adding cards using the mapDispatchToProps function, making a container for card creation, adding it to the correct component, and allowing action data to flow through the application.Handling Dispatched Actions
Steve handles the actions that are flowing through the system, updating the state of the application to reflect changes by implementing changes to the card and list reducer functions in Redux.Updating Nested State
Steve uses the FP Lodash set function to create a helper that abstracts away object creation when adding a card to a list.Action Creator Helpers
Steve refactors code to make changing the state more readable, and then creates an action creator helper for the card creation container taking advantage of the react-redux feature that automatically binds action creators with dispatch.
Redux Libraries
State Store Selectors with Reselect
Steve uses the Reselect library to cut down on the number of times an action to retrieve an object's values is unnecessarily repeated.Reselect Performance
Steve gives a real world example of a performance issue that could occur when using the Reselect library.Redux Thunk
Steve introduces Redux Thunk by explaining how it allows dispatching functions that dispatch an action at a later time.Redux Thunk Setup
Steve demonstrates how to use Redux Thunk to add asynchronous code to a Redux store by setting up code to fetch from an API.Redux Thunk: Dispatching Actions
Steve writes code to dispatch the action and update the page with the response from the asynchronous fetch operation and summarizes the timeline of events in the application.Redux Observable
Steve introduces Redux Observable, which binds Redux to RxJS. Epics, a way to transform action data mid transfer, are introduced through illustrations.Redux Observable Setup
Steve sets up Redux Observables by creating a root epic and setting the reducers listening and the epics to listen.Redux Observable: Mapping Actions
Steve hooks the pieces of the application together by taking the result, piping it through a series of functions, and mapping the response into the desired action. The decision process for using Redux Observables and debugging using tap are also discussed.Redux Observable: Cancelling Requests
Steve demonstrates how to cancel API requests when a newer request comes through before an older request has finished, preventing flashes of intermediary content within the application. A question is fielded about useful functions in RxJS.
MobX
MobX Decorators
Steve introduces MobX by discussing computed properties, getters and setters, decorators, and the benefits and drawbacks of using decorators in an application.Pure MobX Demo
Steve uses MobX with vanilla JavaScript, in isolation of React, to demonstrate how MobX can be used to manipulate the DOM as the user causes events that change the state.MobX Concepts
Steve analyzes the major concepts in MobX: observable state, actions, derivations, computed properties, and reactions. A use case for the MobX feature of cached versions of computed properties is mentioned.MobX in React
Steve explains usage of MobX in React, including decorating a React class with observer to trigger React to rerender on change and how MobX allows for avoiding the shouldComponentUpdate function and prop drilling.List Model MobX Store
Steve describes the course project on MobX, which is to create a packing list, and begins to wire up MobX by building multiple computed properties on top of each other within the list model store.Item Model MobX Store
Steve writes the code for the item model store and gives further explanation about the purpose of action.bound decorator.Add & Remove from the MobX Store
Steve constructs the add and remove methods for the MobX store, giving a high-level description of the state management that is occurring within the application.Wiring MobX to the React App
Steve modifies the application code to connect the MobX item and list stores to the React application, creating components for the unpacked and packed lists and then wiring them in.Sending Data from React into MobX
Steve writes code to inject data from the MobX store into React components to handle events coming in through input fields.
Wrapping Up
MobX vs Redux
Steve differentiates MobX and Redux by breaking down their respective structures, and then explains how to approach a problem based on these structures.Wrapping Up & Q&A
Steve concludes the course on Redux and MobX by giving advice about how to arrive at a decision about how to structure a code base. Then, questions are fielded about normalization and implementing undo/redo.