Redux - Hot Reloading with Time Travel by Dan Abramov
Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015 - YouTube
Dan's Flux Workflow
Developer tools
Sets out to solve one problem: frustration during development of any kind of app, where small errors, nuisances accumulate over time.Workflow is not optimised for iteration. How he optimises his workflow.
Presents his projects and where we can find him on the web. (@dan_abramov)
Status Quo (for web developers)
You have to refresh on every change, then reproduce the state and redo the actions (like re-click the buttons).
But most of the time the change is minimal, scoped to just one small component. It's possible to change these parts.
We can fix it
Most change aren't drastic / Preserve the state / Recover from erros
Some Tools for hot reloading
Amok, Figwheel, LieReactload, React Hot Loader, Webpack
Dan was mostly inspired by these two last libraries.
DEMO: Dan's React Workflow
His slide is made from Reat components. He demonstrates that after changing a typo in his code (forgot to enclose
<timerComponent>), his slide hot updates and the timer runs. So he recovered from a bug, without reloading the page.Then changes the countdown function and the timer on the page counts the other way without again reloading.
Demoes again making an error in the code. The code doesn't run, but the component is not remounted either. As long as he updates his code the counter continues without reloading.
Present the typical React component:- render
- componentDidUpdate
- handleClick
The app is unaware that this is happening. Everything is proxied out.
This is of course for the dev workflow not for production.
The module system - Webpack
Webpack hot module remplacement. Webpack just updates the one file. If you have local state (like Backbone models) this pattern will not change the other modules.
It is only possible because the React render() does not have side effects.
Dan's React Workflow
React Hot Loader / Style Loader / Webpack
Dan's Flux Workflow - React Hot Loader with Flux
Components / Action Creators / stores
Stores are stateful - you cannot re-execute
Stores on a Diet
How to fix stores. They have to much boilerplate (shows example). The boilerplate is in the concept. E.g. AppdDispatcher.register - not necessary. So he just exports this.
Then shows that he replaces collection .push by a cloning.Does not mutate the data.
The getter does not belong to the store. And then other stores start to depend on other stores. Removes the getters.
Then removes the EventEmitters.
The store does not need extra steps to notify about change.
Further simplifies the code and removes more code.
Reducer
Demonstrates that it's not a store it's a reducer.
Reducer + Flux
Call all your reducers and collect them in one object.
Todo App
Shows working with actions.
- Redux
- Redux DevTools
- React Hot Loader
- Webpack