Redux - Hot Reloading with Time Travel by Dan Abramov

In notebook:
Article Notes
Created at:
JavaScript libraries Webpack React
Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015 - YouTube

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
All these are replaced by the React-Hot-Loader by proxies. (render, componentDidUpdate, handleClick). So every time you save your file the proxies are pointing the new version (of your methods, files, whatever)
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.


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. 

Dan's Flux Workflow
  • Redux
  • Redux DevTools
  • React Hot Loader
  • Webpack