[frontendmasters.com] Advanced State Management in React Applications (Redux, MobX, sagas, etc.) [2017, ENG]

https://frontendmasters.com/courses/react-state/
Table of Contents
Introduction
Introduction to State Management
00:00:00 - 00:13:52
Introduction to State Management
Steve Kinney introduces himself and gives an overview of the tools used in the workshop: Flux, Redux, React-Redux, Redux-thunk, Redux-saga, and mobx.
Understanding State
What is Application State
00:13:53 - 00:21:14
What is Application State
React is built for one-way data flow. State stays in the component unless it's passed down.
Types of State
00:21:15 - 00:26:45
Types of State
The word "state" is too broad as there are many types including model data, view/UI state, and more.
Component State
Basic Component State Exercise
00:26:46 - 00:30:11
Basic Component State Exercise
Build a simple react counter component using component state. - https://github.com/stevekinney/basic-counter
Component State Solution
00:30:12 - 00:37:07
Component State Solution
Steve codes out the solution using React this.setState and helps you avoid method binding bugs.
React Component State Quiz
00:37:08 - 00:43:57
React Component State Quiz
Steve uses a quiz to highlight common issues with using component state in React and how to fix them with passing in a function as an argument to this.setState.
State Patterns and Anti-Patterns
00:43:58 - 00:49:04
State Patterns and Anti-Patterns
Steve covers where not to use state, like combining props. Instead use a helper method. Don't use state when it's not being rendered to the view.
Building Jetsetter Exercise
00:49:05 - 00:56:01
Building Jetsetter Exercise
Build an example packing list application. Steve overviews some of the tricky parts you'll need to overcome when building the example. - https://github.com/stevekinney/jetsetter
Jetsetter Solution: Render Items and Handle Input
00:56:02 - 01:06:09
Jetsetter Solution: Render Items and Handle Input
Steve codes rendering the items to the view and handling input of new items.
Jetsetter Solution: Passing state
01:06:10 - 01:19:28
Jetsetter Solution: Passing state
Steve handles passing state up and down through the application in order to be able to mark items as packed and unpacked.
Jetsetter Solution: Q&A
01:19:29 - 01:22:07
Jetsetter Solution: Q&A
A question is asked about persisting application state.
Jetsetter Solution: Implimenting Filter
01:22:08 - 01:25:16
Jetsetter Solution: Implimenting Filter
Steve completes the implimentation of the Jetsetter application by implimenting filter.
State Architecture Patterns
Shared Component State Problems
01:25:17 - 01:34:26
Shared Component State Problems
Sharing state across components becomes problematic. We need a solution to avoid passing data up and down across multiple components.
Introduction to the Container Pattern
01:34:27 - 01:40:28
Introduction to the Container Pattern
Steve introduces the container pattern which lifts state into a component to hold state and presentational component to display the state in the UI.
Container Pattern Demo
01:40:29 - 01:47:12
Container Pattern Demo
Steve codes an example demonstrating use of the container pattern.
Container Pattern Exercise
01:47:13 - 01:49:26
Container Pattern Exercise
Create your own container and presentational component in this exercise.
Container Pattern Solution
01:49:27 - 01:55:44
Container Pattern Solution
Steve splits apart the component into a state container and presntational component.
Higher Order Components & Exercise
01:55:45 - 02:01:27
Higher Order Components & Exercise
Higher order components wraps a presentational component into a container component that holds state.
Higher Order Component Solution
02:01:28 - 02:05:30
Higher Order Component Solution
Steve impliments a high order component pattern in our example application.
Providing a Display Name to HOCs
02:05:31 - 02:12:06
Providing a Display Name to HOCs
Steve finds a problem in the component name using the React Dev Tools and shows how to fix it.
Render Properties Pattern
02:12:07 - 02:15:07
Render Properties Pattern
The render properties pattern is a way to see the component hierachy of your application.
Flux
Flux Introduction and Code Demo
02:15:08 - 02:20:35
Flux Introduction and Code Demo
Introducing the flux application pattern. Instead of showing the common Flux graph, Steve sets up a code example demonstrating Flux in action.
Coding Flux: Dispatcher and Actions
02:20:36 - 02:26:52
Coding Flux: Dispatcher and Actions
Steve codes the dispatcher and actions to send out user actions to be listened to. - http://jsbin.com/yixuyok/edit?js,console
Coding Flux: Action Creators
02:26:53 - 02:30:20
Coding Flux: Action Creators
Shows how to impliment action creators handled by the Dispatcher.
Coding Flux: Store
02:30:21 - 02:39:22
Coding Flux: Store
The store listens to the dispatcher, modifies the state and emits a "change" event.
Coding Flux: Using the Store with a View
02:39:23 - 02:48:08
Coding Flux: Using the Store with a View
The view updates based on the store's state through React's one way data flow.
Flux Conclusion and Review
02:48:09 - 02:57:26
Flux Conclusion and Review
Steve reviews Flux through showing the graph of how flux fits together. - https://github.com/stevekinney/pizza-calculator/tree/flux
Exercise: Implement Flux in Jetsetter
02:57:27 - 03:00:24
Exercise: Implement Flux in Jetsetter
Using the flux-base branch in the Jetsetter example application, impliment the Flux pattern. - https://github.com/stevekinney/jetsetter/tree/flux-base
Flux Solution: Dispatcher and Actions
03:00:25 - 03:09:08
Flux Solution: Dispatcher and Actions
Steve impliments the dispatcher and actions for Jetsetter. - https://github.com/stevekinney/jetsetter/tree/flux
Flux Solution: Item Store
03:09:09 - 03:17:12
Flux Solution: Item Store
Steve impliments the Items Store for Jetsetter to refactor the application state into the store.
Flux Solution: Using the Item Store in the View
03:17:13 - 03:28:14
Flux Solution: Using the Item Store in the View
Refactor the application to use the Items Store throughout the views. The application is now completely refactored to have the state decoupled from the component hierarchy.
Review
03:28:15 - 03:35:09
Review
Steve reviews the things we accomplished so far: component state, React state management patterns and flux.
Redux
Introduction to Redux
03:35:10 - 03:41:54
Introduction to Redux
Redux is a way to store all of your state in an immutable state tree (fancy word for JavaScript Object).
Redux Compose
03:41:55 - 03:45:50
Redux Compose
Compose runs multiple methods passing the argument and result along to each of the methods composed together.
Redux Reducers
03:45:51 - 03:50:05
Redux Reducers
Reducer is a method that modifies and return the new state based on an action and value.
Redux Store: createStore
03:50:06 - 03:54:13
Redux Store: createStore
Create a new store and a subscriber that listens when actions are dispatched to the store.
Redux Store: combineReducers
03:54:14 - 04:01:50
Redux Store: combineReducers
Combining reducers allows you to break your application into smaller parts.
Redux Dispatcher: bindActionCreators
04:01:51 - 04:13:32
Redux Dispatcher: bindActionCreators
Create new action methods which are bound to the Store's dispatch method.
Redux Middleware: applyMiddleware
04:13:33 - 04:21:19
Redux Middleware: applyMiddleware
Steve creates a logger middleware that logs actions to the console.
Redux Exercise
04:21:20 - 04:25:38
Redux Exercise
Steve reviews the exercise to fulfill the tests on actions in the Jetsetter application. - https://github.com/stevekinney/jetsetter/tree/redux-testing
Redux Solution Review
04:25:39 - 04:31:34
Redux Solution Review
Reviews the implimentation of the actions and reducers for Jetsetter. - https://github.com/stevekinney/jetsetter/tree/redux-base
Redux and React
Hooking Up Redux to React
04:31:35 - 04:35:40
Hooking Up Redux to React
Steve hooks up one input feild on pizza calculator to the Redux store using connect() from react-redux.
Adding React Dev Tools
04:35:41 - 04:39:56
Adding React Dev Tools
Using middleware, Steve adds support for logging actions through the React Dev Tools.
Connect React and Redux
04:39:57 - 04:47:17
Connect React and Redux
Continuing on, Steve completes hooking up the input field to the Redux store.
Redux tradeoffs vs React setState()
04:47:18 - 04:49:48
Redux tradeoffs vs React setState()
Discussion of when to use Redux vs React's setState. Redux adds complexity that isn't always needed.
react-redux: connect method
04:49:49 - 04:54:09
react-redux: connect method
Connect allows you to create higher order components that can connect presentational components to the Redux store.
react-redux: Provider component
04:54:10 - 04:58:56
react-redux: Provider component
Provider sends the Store to all of the components in the application..
react-redux Exercise
04:58:57 - 05:01:43
react-redux Exercise
Impliment react-redux connect in the Jetsetter application. - https://github.com/stevekinney/jetsetter/tree/redux-base
Redux Solution: Dev Tools Demo and Review
05:01:44 - 05:06:15
Redux Solution: Dev Tools Demo and Review
Steve reviews the solution in Dev Tools and then walks through the code. - https://github.com/stevekinney/jetsetter/tree/redux
Redux Solution: Undo and Redo
05:06:16 - 05:17:22
Redux Solution: Undo and Redo
Wiring up the undo and redo feature in the Jetsetter application.
Redux Solution: Undo and Redo Reducers
05:17:23 - 05:27:02
Redux Solution: Undo and Redo Reducers
Implimented the undo and redo reducers in the Jetsetter application.Finishing the solution, Steve impliments the undo and redo reducers in the Jetsetter application. - https://github.com/stevekinney/jetsetter/tree/redux-undo
Redux Thunk
Thunk: Asynchronous Redux
05:27:03 - 05:31:38
Thunk: Asynchronous Redux
Thunks are functions returned from another function, used for asynchronous actions.
Exercise: Redux Thunk
05:31:39 - 05:33:56
Exercise: Redux Thunk
Make Jetsetter use the API wrapped in asynchronous action creators (Redux Thunk). - https://github.com/stevekinney/jetsetter/tree/redux-thunk-base
Redux Thunk Solution
05:33:57 - 05:44:00
Redux Thunk Solution
Implementing the Redux Thunks to make Redux wrap the asynchronous APIs. - https://github.com/stevekinney/jetsetter/tree/redux-thunk
Get Items from Asynchonous API
05:44:01 - 05:48:25
Get Items from Asynchonous API
Get initial API items asynchonously.
Async Actions and Debugging
05:48:26 - 06:02:15
Async Actions and Debugging
Add the asynchonous actions and debugging along the way. - https://github.com/stevekinney/jetsetter/tree/live-coding-redux-thunk
Thunk Tradeoffs
06:02:16 - 06:05:02
Thunk Tradeoffs
Discuss tradeoffs with testing and debugging asynchonous code.
Redux Saga
Generator Functions
06:05:03 - 06:10:54
Generator Functions
ES6 Generator functions allow you to pause functions and continue when you get data back from asynchonous methods.
Introduction to Sagas
06:10:55 - 06:15:07
Introduction to Sagas
Sagas allow you to separate the asynchrony from your user interface.
Setting up Sagas
06:15:08 - 06:20:05
Setting up Sagas
How to get started setting up and using sagas in your code.
Adding Sagas to Jetsetter
06:20:06 - 06:33:36
Adding Sagas to Jetsetter
Refactoring the Jetsetter application to use Sagas instead of thunks. - https://github.com/stevekinney/jetsetter/tree/redux-saga
Sagas Exercise: Offices and Dragons
06:33:37 - 06:34:45
Sagas Exercise: Offices and Dragons
More practice using Sagas for asynchronous state management. - https://github.com/stevekinney/offices-and-dragons
Redux Sagas Solution
06:34:46 - 06:36:44
Redux Sagas Solution
Walkthrough of the solution to the Offices and Dragons exercise. - https://github.com/stevekinney/offices-and-dragons/tree/redux-saga
Saga Helpers
06:36:45 - 06:38:37
Saga Helpers
Overview of techniques for handling race conditions using Saga helpers like takeLatest and takeEvery.
MobX
Computed properties: getters and setters
06:38:38 - 06:43:10
Computed properties: getters and setters
ES6 computed properties help you write consistent interfaces for your JavaScript objects.
Decorators
06:43:11 - 06:47:04
Decorators
Decorators provided syntactic sugar for writing methods and higher order functions.
Introduction to MobX
06:47:05 - 06:53:26
Introduction to MobX
MobX is a library that is reactive to easily reflect model state in the UI. - http://jsbin.com/tenajeh/edit?html,output
Coding a Simple Observable
06:53:27 - 06:58:21
Coding a Simple Observable
Building a simple observable helps you understand how an observable works under the hood.
Four components of MobX
06:58:22 - 07:01:27
Four components of MobX
Looking at observables, actions and derivations in MobX.
MobX data structures: arrays, objects, and maps
07:01:28 - 07:04:27
MobX data structures: arrays, objects, and maps
Overview of the types of data structures available in MobX.
MobX with React
07:04:28 - 07:09:56
MobX with React
Use the mobx-react library to bind your data to React views.
Solution: Setup Models
07:09:57 - 07:20:19
Solution: Setup Models
Steve adds MobX to the Jetsetter application. - https://github.com/stevekinney/jetsetter/tree/mobx-base
Solution: Provide and Inject ItemList
07:20:20 - 07:32:06
Solution: Provide and Inject ItemList
Injecting the ItemList into the application and components. - https://github.com/stevekinney/jetsetter/tree/mobx
MobX Exercise: Model Methods
07:32:07 - 07:34:57
MobX Exercise: Model Methods
Coding the solution to adding MobX models to the Jetsetter application.
MobX Solution: Models and Components
07:34:58 - 07:53:18
MobX Solution: Models and Components
Injecting the MobX models into React components.
MobX Review and Asynchronous
07:53:19 - 07:55:25
MobX Review and Asynchronous
Review of MobX and overview of how to accomplish asynchronous MobX.
State Management Approaches
Closing Thoughts / Final Q&A: State Tree Structure
07:55:26 - 08:04:20
Closing Thoughts / Final Q&A: State Tree Structure
Tradeoffs between immutable state trees and dependency graphs, discussion of approaches to structuring large state trees.