Advanced State Management in React (feat. Redux and MobX)
Table of Contents
Introduction to State ManagementSteve Kinney introduces himself and gives an overview of the tools used in the workshop: Flux, Redux, React-Redux, Redux-thunk, Redux-saga, and mobx.
What is Application StateReact is built for one-way data flow. State stays in the component unless it's passed down.
Types of StateThe word "state" is too broad as there are many types including model data, view/UI state, and more.
Basic Component State ExerciseBuild a simple react counter component using component state.
Component State SolutionSteve codes out the solution using React this.setState and helps you avoid method binding bugs.
React Component State QuizSteve 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-PatternsSteve 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 ExerciseBuild an example packing list application. Steve overviews some of the tricky parts you'll need to overcome when building the example.
Jetsetter Solution: Render Items and Handle InputSteve codes rendering the items to the view and handling input of new items.
Jetsetter Solution: Passing stateSteve handles passing state up and down through the application in order to be able to mark items as packed and unpacked.
Jetsetter Solution: Q&AA question is asked about persisting application state.
Jetsetter Solution: Implimenting FilterSteve completes the implimentation of the Jetsetter application by implimenting filter.
State Architecture Patterns
Shared Component State ProblemsSharing state across components becomes problematic. We need a solution to avoid passing data up and down across multiple components.
Introduction to the Container PatternSteve 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 DemoSteve codes an example demonstrating use of the container pattern.
Container Pattern ExerciseCreate your own container and presentational component in this exercise.
Container Pattern SolutionSteve splits apart the component into a state container and presntational component.
Higher Order Components & ExerciseHigher order components wraps a presentational component into a container component that holds state.
Higher Order Component SolutionSteve impliments a high order component pattern in our example application.
Providing a Display Name to HOCsSteve finds a problem in the component name using the React Dev Tools and shows how to fix it.
Render Properties PatternThe render properties pattern is a way to see the component hierachy of your application.
Flux Introduction and Code DemoIntroducing 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 ActionsSteve codes the dispatcher and actions to send out user actions to be listened to.
Coding Flux: Action CreatorsShows how to impliment action creators handled by the Dispatcher.
Coding Flux: StoreThe store listens to the dispatcher, modifies the state and emits a "change" event.
Coding Flux: Using the Store with a ViewThe view updates based on the store's state through React's one way data flow.
Flux Conclusion and ReviewSteve reviews Flux through showing the graph of how flux fits together.
Exercise: Implement Flux in JetsetterUsing the flux-base branch in the Jetsetter example application, impliment the Flux pattern.
Flux Solution: Dispatcher and ActionsSteve impliments the dispatcher and actions for Jetsetter.
Flux Solution: Item StoreSteve impliments the Items Store for Jetsetter to refactor the application state into the store.
Flux Solution: Using the Item Store in the ViewRefactor 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.
ReviewSteve reviews the things we accomplished so far: component state, React state management patterns and flux.
Redux ComposeCompose runs multiple methods passing the argument and result along to each of the methods composed together.
Redux ReducersReducer is a method that modifies and return the new state based on an action and value.
Redux Store: createStoreCreate a new store and a subscriber that listens when actions are dispatched to the store.
Redux Store: combineReducersCombining reducers allows you to break your application into smaller parts.
Redux Dispatcher: bindActionCreatorsCreate new action methods which are bound to the Store's dispatch method.
Redux Middleware: applyMiddlewareSteve creates a logger middleware that logs actions to the console.
Redux ExerciseSteve reviews the exercise to fulfill the tests on actions in the Jetsetter application.
Redux Solution ReviewReviews the implimentation of the actions and reducers for Jetsetter.
Redux and React
Hooking Up Redux to ReactSteve hooks up one input feild on pizza calculator to the Redux store using connect() from react-redux.
Adding React Dev ToolsUsing middleware, Steve adds support for logging actions through the React Dev Tools.
Connect React and ReduxContinuing 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 methodConnect allows you to create higher order components that can connect presentational components to the Redux store.
react-redux: Provider componentProvider sends the Store to all of the components in the application..
react-redux ExerciseImpliment react-redux connect in the Jetsetter application.
Redux Solution: Dev Tools Demo and ReviewSteve reviews the solution in Dev Tools and then walks through the code.
Redux Solution: Undo and RedoWiring up the undo and redo feature in the Jetsetter application.
Redux Solution: Undo and Redo ReducersImplimented the undo and redo reducers in the Jetsetter application.Finishing the solution, Steve impliments the undo and redo reducers in the Jetsetter application.
Thunk: Asynchronous ReduxThunks are functions returned from another function, used for asynchronous actions.
Exercise: Redux ThunkMake Jetsetter use the API wrapped in asynchronous action creators (Redux Thunk).
Redux Thunk SolutionImplementing the Redux Thunks to make Redux wrap the asynchronous APIs.
Get Items from Asynchonous APIGet initial API items asynchonously.
Async Actions and DebuggingAdd the asynchonous actions and debugging along the way.
Thunk TradeoffsDiscuss tradeoffs with testing and debugging asynchonous code.
Generator FunctionsES6 Generator functions allow you to pause functions and continue when you get data back from asynchonous methods.
Introduction to SagasSagas allow you to separate the asynchrony from your user interface.
Setting up SagasHow to get started setting up and using sagas in your code.
Adding Sagas to JetsetterRefactoring the Jetsetter application to use Sagas instead of thunks.
Sagas Exercise: Offices and DragonsMore practice using Sagas for asynchronous state management.
Redux Sagas SolutionWalkthrough of the solution to the Offices and Dragons exercise.
Saga HelpersOverview of techniques for handling race conditions using Saga helpers like takeLatest and takeEvery.
DecoratorsDecorators provided syntactic sugar for writing methods and higher order functions.
Introduction to MobXMobX is a library that is reactive to easily reflect model state in the UI.
Coding a Simple ObservableBuilding a simple observable helps you understand how an observable works under the hood.
Four components of MobXLooking at observables, actions and derivations in MobX.
MobX data structures: arrays, objects, and mapsOverview of the types of data structures available in MobX.
MobX with ReactUse the mobx-react library to bind your data to React views.
Solution: Setup ModelsSteve adds MobX to the Jetsetter application.
Solution: Provide and Inject ItemListInjecting the ItemList into the application and components.
MobX Exercise: Model MethodsCoding the solution to adding MobX models to the Jetsetter application.
MobX Solution: Models and ComponentsInjecting the MobX models into React components.
MobX Review and AsynchronousReview of MobX and overview of how to accomplish asynchronous MobX.