State Management with Redux & MobX
Table of Contents
IntroductionSteve 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.
Copy Instead of MutateSteve discusses methods of obtaining immutable data structures, including libraries, object methods, and array methods.
Redux Functions OverviewSteve gives an overview of Redux functions and then gives a demonstration of using the compose function to combine functions together.
reducer & createStoreSteve 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 & subscribeSteve 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.
combineReducersSteve explains the purpose of combineReducers, and describes how it enables breaking up functionality into manageable pieces by pairing reducers with the state object.
bindActionCreatorsSteve 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 ReduxSteve 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 StoreSteve 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 ReactSteve 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 & SolutionStudents 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 ReduxSteve breaks down factors in deciding whether or not to use Redux in an application and introduces the section on normalizing data.
Implementing a Kanban BoardSteve 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 SchemaSteve 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 AppSteve 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 DevToolsSteve 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 ComponentsSteve 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 ExerciseStudents 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 SolutionSteve live codes the solution to the exercise.
Implementing Map Dispatch to PropsSteve 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 ActionsSteve 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 StateSteve uses the FP Lodash set function to create a helper that abstracts away object creation when adding a card to a list.
Action Creator HelpersSteve 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.
State Store Selectors with ReselectSteve uses the Reselect library to cut down on the number of times an action to retrieve an object's values is unnecessarily repeated.
Reselect PerformanceSteve gives a real world example of a performance issue that could occur when using the Reselect library.
Redux ThunkSteve introduces Redux Thunk by explaining how it allows dispatching functions that dispatch an action at a later time.
Redux Thunk SetupSteve 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 ActionsSteve 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 ObservableSteve introduces Redux Observable, which binds Redux to RxJS. Epics, a way to transform action data mid transfer, are introduced through illustrations.
Redux Observable SetupSteve sets up Redux Observables by creating a root epic and setting the reducers listening and the epics to listen.
Redux Observable: Mapping ActionsSteve 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 RequestsSteve 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 DecoratorsSteve introduces MobX by discussing computed properties, getters and setters, decorators, and the benefits and drawbacks of using decorators in an application.
MobX ConceptsSteve 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 ReactSteve 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 StoreSteve 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 StoreSteve writes the code for the item model store and gives further explanation about the purpose of action.bound decorator.
Add & Remove from the MobX StoreSteve 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 AppSteve 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 MobXSteve writes code to inject data from the MobX store into React components to handle events coming in through input fields.
MobX vs ReduxSteve 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&ASteve 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.