This course will take you on a tour through the most popular state management approaches and libraries, and is designed for developers with a working knowledge of React who want a solid understanding of the various ways to manage state in large React applications. Steve Kinney -- principal front-end engineer at SendGrid -- explores popular libraries and concepts such as Flux, Redux, MobX, asynchronous state, and more. Learning these patterns will help you leverage the best techniques for managing state in your applications!
This course and others like it are available as part of our Frontend Masters video subscription.
Published: December 4, 2017
Table of Contents
Introduction
Understanding State
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
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
Build a simple react counter component using component state. - https://github.com/stevekinney/basic-counterComponent State Solution
Steve codes out the solution using React this.setState and helps you avoid method binding bugs.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
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
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/jetsetterJetsetter Solution: Render Items and Handle Input
Steve codes rendering the items to the view and handling input of new items.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
A question is asked about persisting application state.Jetsetter Solution: Implimenting Filter
Steve completes the implimentation of the Jetsetter application by implimenting filter.
State Architecture Patterns
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
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
Steve codes an example demonstrating use of the container pattern.Container Pattern Exercise
Create your own container and presentational component in this exercise.Container Pattern Solution
Steve splits apart the component into a state container and presntational component.Higher Order Components & Exercise
Higher order components wraps a presentational component into a container component that holds state.Higher Order Component Solution
Steve impliments a high order component pattern in our example application.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
The render properties pattern is a way to see the component hierachy of your application.
Flux
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
Steve codes the dispatcher and actions to send out user actions to be listened to. - http://jsbin.com/yixuyok/edit?js,consoleCoding Flux: Action Creators
Shows how to impliment action creators handled by the Dispatcher.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
The view updates based on the store's state through React's one way data flow.Flux Conclusion and Review
Steve reviews Flux through showing the graph of how flux fits together. - https://github.com/stevekinney/pizza-calculator/tree/fluxExercise: 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-baseFlux Solution: Dispatcher and Actions
Steve impliments the dispatcher and actions for Jetsetter. - https://github.com/stevekinney/jetsetter/tree/fluxFlux 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
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
Steve reviews the things we accomplished so far: component state, React state management patterns and flux.
Redux
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
Compose runs multiple methods passing the argument and result along to each of the methods composed together.Redux Reducers
Reducer is a method that modifies and return the new state based on an action and value.Redux Store: createStore
Create a new store and a subscriber that listens when actions are dispatched to the store.Redux Store: combineReducers
Combining reducers allows you to break your application into smaller parts.Redux Dispatcher: bindActionCreators
Create new action methods which are bound to the Store's dispatch method.Redux Middleware: applyMiddleware
Steve creates a logger middleware that logs actions to the console.Redux Exercise
Steve reviews the exercise to fulfill the tests on actions in the Jetsetter application. - https://github.com/stevekinney/jetsetter/tree/redux-testingRedux 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
Steve hooks up one input feild on pizza calculator to the Redux store using connect() from react-redux.Adding React Dev Tools
Using middleware, Steve adds support for logging actions through the React Dev Tools.Connect React and Redux
Continuing on, Steve completes hooking up the input field to the Redux store.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
Connect allows you to create higher order components that can connect presentational components to the Redux store.react-redux: Provider component
Provider sends the Store to all of the components in the application..react-redux Exercise
Impliment react-redux connect in the Jetsetter application. - https://github.com/stevekinney/jetsetter/tree/redux-baseRedux 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/reduxRedux Solution: Undo and Redo
Wiring up the undo and redo feature in the Jetsetter application.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
Thunks are functions returned from another function, used for asynchronous actions.Exercise: Redux Thunk
Make Jetsetter use the API wrapped in asynchronous action creators (Redux Thunk). - https://github.com/stevekinney/jetsetter/tree/redux-thunk-baseRedux Thunk Solution
Implementing the Redux Thunks to make Redux wrap the asynchronous APIs. - https://github.com/stevekinney/jetsetter/tree/redux-thunkGet Items from Asynchonous API
Get initial API items asynchonously.Async Actions and Debugging
Add the asynchonous actions and debugging along the way. - https://github.com/stevekinney/jetsetter/tree/live-coding-redux-thunkThunk Tradeoffs
Discuss tradeoffs with testing and debugging asynchonous code.
Redux Saga
Generator Functions
ES6 Generator functions allow you to pause functions and continue when you get data back from asynchonous methods.Introduction to Sagas
Sagas allow you to separate the asynchrony from your user interface.Setting up Sagas
How to get started setting up and using sagas in your code.Adding Sagas to Jetsetter
Refactoring the Jetsetter application to use Sagas instead of thunks. - https://github.com/stevekinney/jetsetter/tree/redux-sagaSagas Exercise: Offices and Dragons
More practice using Sagas for asynchronous state management. - https://github.com/stevekinney/offices-and-dragonsRedux Sagas Solution
Walkthrough of the solution to the Offices and Dragons exercise. - https://github.com/stevekinney/offices-and-dragons/tree/redux-sagaSaga Helpers
Overview of techniques for handling race conditions using Saga helpers like takeLatest and takeEvery.
MobX
Computed properties: getters and setters
ES6 computed properties help you write consistent interfaces for your JavaScript objects.Decorators
Decorators provided syntactic sugar for writing methods and higher order functions.Introduction to MobX
MobX is a library that is reactive to easily reflect model state in the UI. - http://jsbin.com/tenajeh/edit?html,outputCoding a Simple Observable
Building a simple observable helps you understand how an observable works under the hood.Four components of MobX
Looking at observables, actions and derivations in MobX.MobX data structures: arrays, objects, and maps
Overview of the types of data structures available in MobX.MobX with React
Use the mobx-react library to bind your data to React views.Solution: Setup Models
Steve adds MobX to the Jetsetter application. - https://github.com/stevekinney/jetsetter/tree/mobx-baseSolution: Provide and Inject ItemList
Injecting the ItemList into the application and components. - https://github.com/stevekinney/jetsetter/tree/mobxMobX Exercise: Model Methods
Coding the solution to adding MobX models to the Jetsetter application.MobX Solution: Models and Components
Injecting the MobX models into React components.MobX Review and Asynchronous
Review of MobX and overview of how to accomplish asynchronous MobX.