Advanced State Management in React (feat. Redux and MobX)

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.

React is built for one-way data flow. State stays in the component unless it's passed down.

The word "state" is too broad as there are many types including model data, view/UI state, and more.

Build a simple react counter component using component state.

Steve codes out the solution using React this.setState and helps you avoid method binding bugs.

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.

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.

Build an example packing list application. Steve overviews some of the tricky parts you'll need to overcome when building the example.

Steve codes rendering the items to the view and handling input of new items.

Steve handles passing state up and down through the application in order to be able to mark items as packed and unpacked.

A question is asked about persisting application state.

Steve completes the implimentation of the Jetsetter application by implimenting filter.

Sharing state across components becomes problematic. We need a solution to avoid passing data up and down across multiple components.

Steve introduces the container pattern which lifts state into a component to hold state and presentational component to display the state in the UI.

Steve codes an example demonstrating use of the container pattern.

Create your own container and presentational component in this exercise.

Steve splits apart the component into a state container and presntational component.

Higher order components wraps a presentational component into a container component that holds state.

Steve impliments a high order component pattern in our example application.

Steve finds a problem in the component name using the React Dev Tools and shows how to fix it.

The render properties pattern is a way to see the component hierachy of your application.

Introducing the flux application pattern. Instead of showing the common Flux graph, Steve sets up a code example demonstrating Flux in action.

Steve codes the dispatcher and actions to send out user actions to be listened to.

Shows how to impliment action creators handled by the Dispatcher.

The store listens to the dispatcher, modifies the state and emits a "change" event.

The view updates based on the store's state through React's one way data flow.

Steve reviews Flux through showing the graph of how flux fits together.

Using the flux-base branch in the Jetsetter example application, impliment the Flux pattern.

Steve impliments the dispatcher and actions for Jetsetter.

Steve impliments the Items Store for Jetsetter to refactor the application state into the store.

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.

Steve reviews the things we accomplished so far: component state, React state management patterns and flux.

Redux is a way to store all of your state in an immutable state tree (fancy word for JavaScript Object).

Compose runs multiple methods passing the argument and result along to each of the methods composed together.

Reducer is a method that modifies and return the new state based on an action and value.

Create a new store and a subscriber that listens when actions are dispatched to the store.

Combining reducers allows you to break your application into smaller parts.

Create new action methods which are bound to the Store's dispatch method.

Steve creates a logger middleware that logs actions to the console.

Steve reviews the exercise to fulfill the tests on actions in the Jetsetter application.

Reviews the implimentation of the actions and reducers for Jetsetter.

Steve hooks up one input feild on pizza calculator to the Redux store using connect() from react-redux.

Using middleware, Steve adds support for logging actions through the React Dev Tools.

Continuing on, Steve completes hooking up the input field to the Redux store.

Discussion of when to use Redux vs React's setState. Redux adds complexity that isn't always needed.

Connect allows you to create higher order components that can connect presentational components to the Redux store.

Provider sends the Store to all of the components in the application..

Impliment react-redux connect in the Jetsetter application.

Steve reviews the solution in Dev Tools and then walks through the code.

Wiring up the undo and redo feature in the Jetsetter application.

Implimented the undo and redo reducers in the Jetsetter application.Finishing the solution, Steve impliments the undo and redo reducers in the Jetsetter application.

Thunks are functions returned from another function, used for asynchronous actions.

Make Jetsetter use the API wrapped in asynchronous action creators (Redux Thunk).

Implementing the Redux Thunks to make Redux wrap the asynchronous APIs.

Get initial API items asynchonously.

Add the asynchonous actions and debugging along the way.

Discuss tradeoffs with testing and debugging asynchonous code.

ES6 Generator functions allow you to pause functions and continue when you get data back from asynchonous methods.

Sagas allow you to separate the asynchrony from your user interface.

How to get started setting up and using sagas in your code.

Refactoring the Jetsetter application to use Sagas instead of thunks.

More practice using Sagas for asynchronous state management.

Walkthrough of the solution to the Offices and Dragons exercise.

Overview of techniques for handling race conditions using Saga helpers like takeLatest and takeEvery.

ES6 computed properties help you write consistent interfaces for your JavaScript objects.

Decorators provided syntactic sugar for writing methods and higher order functions.

MobX is a library that is reactive to easily reflect model state in the UI. MobX is a library that is reactive to easily reflect model state in the UI. MobX is a library that is reactive to easily reflect model state in the UI. MobX is a library that is reactive to easily reflect model state in the UI. MobX is a library that is reactive to easily reflect model state in the UI. MobX is a library that is reactive to easily reflect model state in the UI.

Building a simple observable helps you understand how an observable works under the hood.

Looking at observables, actions and derivations in MobX.

Overview of the types of data structures available in MobX.

Use the mobx-react library to bind your data to React views.

Steve adds MobX to the Jetsetter application.

Injecting the ItemList into the application and components.

Coding the solution to adding MobX models to the Jetsetter application.

Injecting the MobX models into React components.

Review of MobX and overview of how to accomplish asynchronous MobX.

Tradeoffs between immutable state trees and dependency graphs, discussion of approaches to structuring large state trees.