Temporal
State Management with Redux & MobX
5 hours, 3 minutes
CC
Course Description
In this course, you’ll learn best practices for structuring your data and how to keep your application fast and nimble as your codebase grows. You’ll get your hands on multiple solutions for managing state in large React applications including Redux, Redux Thunk, Redux Observables and MobX.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: July 23, 2019
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: 23 minutes
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.
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.
Steve discusses methods of obtaining immutable data structures, including libraries, object methods, and array methods.
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
Section Duration: 37 minutes
Steve gives an overview of Redux functions and then gives a demonstration of using the compose function to combine functions together.
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.
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.
Steve explains the purpose of combineReducers, and describes how it enables breaking up functionality into manageable pieces by pairing reducers with the state object.
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.
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
Section Duration: 1 hour, 32 minutes
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.
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.
Students are instructed to implement the decrement functionality of the counter, and then Steve live codes the solution to the exercise.
Steve breaks down factors in deciding whether or not to use Redux in an application and introduces the section on normalizing data.
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.
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.
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.
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.
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.
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.
Steve live codes the solution to the exercise.
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.
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.
Steve uses the FP Lodash set function to create a helper that abstracts away object creation when adding a card to a list.
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
Section Duration: 1 hour, 13 minutes
Steve uses the Reselect library to cut down on the number of times an action to retrieve an object's values is unnecessarily repeated.
Steve gives a real world example of a performance issue that could occur when using the Reselect library.
Steve introduces Redux Thunk by explaining how it allows dispatching functions that dispatch an action at a later time.
Steve demonstrates how to use Redux Thunk to add asynchronous code to a Redux store by setting up code to fetch from an API.
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.
Steve introduces Redux Observable, which binds Redux to RxJS. Epics, a way to transform action data mid transfer, are introduced through illustrations.
Steve sets up Redux Observables by creating a root epic and setting the reducers listening and the epics to listen.
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.
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
Section Duration: 59 minutes
Steve introduces MobX by discussing computed properties, getters and setters, decorators, and the benefits and drawbacks of using decorators in an application.
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.
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.
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.
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.
Steve writes the code for the item model store and gives further explanation about the purpose of action.bound decorator.
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.
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.
Steve writes code to inject data from the MobX store into React components to handle events coming in through input fields.
Wrapping Up
Section Duration: 16 minutes
Steve differentiates MobX and Redux by breaking down their respective structures, and then explains how to approach a problem based on these structures.
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.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops