Explore using Flow for statically analyzing state and actions

[gaearon]

See the example from this PR to Facebook's Flux:

type Action =
  {
    type: 'foo',
    foo: number,
  } |
  {
    type: 'bar',
    bar: string,
  };

var FooDispatcher: Dispatcher<Action> = new Dispatcher();

function acceptsNumber(x: number): void {}

FooDispatcher.register(function(action: Action) {
  switch (action.type) {
    case 'foo':
      acceptsNumber(action.foo);
      acceptsNumber(action.bar); // flow error, property not found in object
      break;

    case 'bar':
      acceptsNumber(action.bar); // flow error, string incompatible with number
      break;
  }
});

type NotAction = string;
FooDispatcher.register(function(action: NotAction) {}); // flow error

// flow error
FooDispatcher.dispatch({
  type: 'foo-typo',
  foo: 100,
});

Now that #254 is merged (into 1.0 branch), I encourage you to help me figure out how to have the same awesomeness in Redux. We probably need to make createStore definition generic so that you can say createStore<MyState, MyAction>(reducer, initialState) and have your whole reducer tree type checked.

I'm a Flow noob so any help is welcome. You can start by copying the Counter example, annotating it with Flow and trying to make it type check like in facebookarchive/flux#243.

[meoyawn]

I don't know if there's a better way to represent algebraic data types in flow's type system
https://gist.github.com/hallettj/281e4080c7f4eaf98317

Also, to get a safe and exhaustive pattern matching you can use church encoding
https://apocalisp.wordpress.com/2009/08/21/structural-pattern-matching-in-java/

[meoyawn]

oh, apparently there's a more idiomatic way of handling ADTs http://flowtype.org/blog/2015/07/03/Disjoint-Unions.html

[gaearon]

I managed to use the Flow definitions from the Redux source code by using the following Flow config in my standalone example:

[ignore]
.*/node_modules/webpack/.*
.*/node_modules/webpack-dev-server/.*
.*/node_modules/redux/examples/.*
.*/node_modules/redux/lib/.*

[include]

[libs]

[options]
module.system=node
module.name_mapper='\(redux\)' -> '\1/src/index'

Note that this requires src to be in the NPM distribution (we'll be including it then).

It's pretty cool already! I'll play with it and see if any common Redux mistakes can be caught this way, and if I can tweak the type definitions to check the action parameter types.

[leoasis]

@gaearon nice, I was trying to find out how to do that! I'm playing with this a little bit to see if I can get to something

[gaearon]

I made some progress but bumped into this: facebook/flow#652.

[leoasis]

Just wanted to show some progress I made by putting everything into a single file (since it is far from intuitive how to make Flow work across modules, and even more when those modules are in different npm packages). I was able to make the basic createStore type check with a basic reducer and state (the counter example). The code is below. I've added two different properties on the INCREMENT and DECREMENT actions on purpose in order to verify that Flow is type checking correctly inside the switch case (it does after all!).

What Flow does not understand is using the constants directly in the Action union type, it has to be a string literal. For that reason, and since we now have Flow, I found it no longer necessary to use constants, at least in this example.

/* @flow */

//Redux types (provided by redux lib)
type ReduxInitAction = {type: '@@redux/INIT'};
type ReduxAction<Action> = ReduxInitAction | Action;

type Reducer<State, Action> = (state : State, action : ReduxAction<Action>) => State;
type Store<State, Action> = {
  dispatch : (action : ReduxAction<Action>) => ReduxAction<Action>,
  subscribe : (listener : () => void) => (() => void),
  getState : () => State,
  getReducer : () => Reducer<State, Action>,
  replaceReducer : any
};

//Mock implementation that just type checks
function createStore<State, Action>(reducer : Reducer<State, Action>, initialState : State) : Store<State, Action> {
  return {
    dispatch(action) { return action; },
    getReducer() { return reducer; },
    getState() { return initialState },
    replaceReducer() { },
    subscribe() { return function() {} }
  }
}

// App's types
type State = number

type Action = {
  type: 'INCREMENT_COUNTER', increment: number
} | {
  type: 'DECREMENT_COUNTER', decrement: number
}

function counter(state : State = 0, action : ReduxAction<Action>) {
  switch (action.type) {
  case 'INCREMENT_COUNTER':
    return state + action.increment;
  case 'DECREMENT_COUNTER':
    return state - action.decrement;
  default:
    return state;
  }
}

// This needs to be type casted for some reason
var store: Store<State, Action> = createStore(counter, 0);

store.dispatch({type: 'INCREMENT_COUNTER', increment: 1});
store.dispatch({type: 'foo'}); // fails type check
store.dispatch({type: 'INCREMENT_COUNTER'}); // fails type check

Next steps, for which I may need some help:

1. Correctly put the types in replaceReducer since that can change the reducer State and Action types, so it may not be correctly type checking if we just assign that reducer to the current one internally in the store. Perhaps this is a hint that we should instead return a new store with that new reducer?
2. Be able to make this work among different files, especially with some types being in the redux library, which will have the types stripped after being transpiled with babel. Ideas: 1) transform those types into flow comments (https://github.com/babel-plugins/babel-plugin-flow-comments), 2) have a declarations file and a types file that can be required and included as a lib in flow (perhaps this declarations file could be extracted somehow from the types in the src?).
3. Finish adding types for the utils functions.
4. Add types for other packages such as redux-thunk?

[gaearon]

This is a great starting point already, thank you!

have a declarations file and a types file that can be required and included as a lib in flow (perhaps this declarations file could be extracted somehow from the types in the src?).

That's exactly what we have with the config I posted above. “Flow as comments in compiled output” doesn't work well because it complains about Babel generated code.

The steps are:

• Use the config above as your .flowconfig
• Manually put src into node_modules/redux (we'd need to remove src from .npmignore)
• Export some types from index.js via export type declarations like the ones Remove Flow types for now #299 removed

[leoasis]

Oh great @gaearon forgot about that above. Will try to move forward with that

[nmn]

Hey @gaearon I've been using more and more flow in my own code, and having it to check action constants is quite awesome.

Even if you don't put flow everywhere else your code-base it's quite awesome to have them just for action constants like so:

type ActionStrings = 'ACTION_ONE'
                   | 'ACTION_TWO'
                   | 'ACTION_THREE'
                   | 'ACTION_FOUR'

export default var actions: {[key: ActionStrings]: ActionStrings} = {
  'ACTION_ONE': 'ACTION_ONE',
  'ACTION_TWO': 'ACTION_TWO',
  'ACTION_THREE': 'ACTION_THREE',
  'ACTION_FOUR': 'ACTION_FOUR'
}

Now when dispatching an action, if you use the constants, flow does error checking for you.

import actions from './actions'

dispatch(actions.ACTION_ONE) // will work
dispatch(actions.ACTIONS_1) // flow will throw an error

When using strings for events and actions, misspelling can cause a lot of pain. This solves that problem completely.

Further, it should possible to generate flow types automatically with minimal tooling.