Flow + Redux

Learn how to use Flow with Redux

Redux has three major parts that should be typed:

  • State
  • Actions
  • Reducers

Typing Redux state

Typing your state object, works the same as typing any other object in Flow.

1
2
3
4
5
6
7
8
9
10
 
type State = {
  users: Array<{
    id: string
    name: string,
    age: number,
    phoneNumber: string,
  }>,
  activeUserID: string,
  // ...
};

We can use this type alias to make sure reducers work correctly.

Typing Redux state immutability

Redux state is meant to be immutable: creating a new state object instead of changing properties on a single object.

You can enforce this in Flow by making every property effectively “read-only” using “covariant” properties throughout your state object.

1
2
3
4
5
6
7
8
9
10
 
type State = {
  +users: Array<{
    +id: string
    +name: string,
    +age: number,
    +phoneNumber: string,
  }>,
  +activeUserID: string,
  // ...
};

Now Flow will complain when you try to write to any of these properties.

1
2
3
4
5
6
7
8
9
10
 
// @flow
type State = {
  +foo: string
};

let state: State = {
  foo: "foo"
};

state.foo = "bar"; // Error!
object type Covariant property `foo` incompatible with contravariant use in assignment of property `foo`

Typing Redux actions

The base type for Redux actions is an object with a type property.

1
2
3
 
type Action = {
  +type: string,
};

But you’ll want to use more specific types for your actions using disjoint unions and each individual type of action.

1
2
3
4
 
type Action =
  | { type: "FOO", foo: number }
  | { type: "BAR", bar: boolean }
  | { type: "BAZ", baz: string };

Using disjoint unions, Flow will be able to understand your reducers much better.

Typing Redux action creators

In order to type your Redux action creators, you’ll want to split up your Action disjoint union into separate action types.

1
2
3
4
5
6
 
type FooAction = { type: "FOO", foo: number };
type BarAction = { type: "BAR", bar: boolean };

type Action =
  | FooAction
  | BarAction;

Then to type the action creator, just add a return type of the appropriate action.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// @flow
type FooAction = { type: "FOO", foo: number };
type BarAction = { type: "BAR", bar: boolean };

type Action =
  | FooAction
  | BarAction;

function foo(value: number): FooAction {
  return { type: "FOO", foo: value };
}

function bar(value: boolean): BarAction {
  return { type: "BAR", bar: value };
}
Typing Redux thunk actions

In order to type your Redux thunk actions, you’ll add types for ThunkAction as a function Dispatch, and GetState. GetState is a function that returns an Object. Dispatch accepts a disjoint union of Action, ThunkAction, PromiseAction and Array<Action> and can return any.

1
2
3
4
 
type Dispatch = (action: Action | ThunkAction | PromiseAction) => any;
type GetState = () => Object;
type ThunkAction = (dispatch: Dispatch, getState: GetState) => any;
type PromiseAction = Promise<Action>;

Then to type a thunk action creator, add a return type of a ThunkAction to your action creator.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
// @flow
type Action =
  | { type: "FOO", foo: number }
  | { type: "BAR", bar: boolean };

type GetState = () => Object;
type PromiseAction = Promise<Action>;
type ThunkAction = (dispatch: Dispatch, getState: GetState) => any;
type Dispatch = (action: Action | ThunkAction | PromiseAction | Array<Action>) => any;


function foo(): ThunkAction {
  return (dispatch, getState) => {
    const baz = getState().baz
    dispatch({ type: "BAR", bar: true })
    doSomethingAsync(baz)
      .then(value => {
  	    dispatch({ type: "FOO", foo: value })
      })
	}
}
identifier `doSomethingAsync` Could not resolve name

Typing Redux reducers

Reducers take the state and actions that we’ve typed and pulls them together for one method.

1
2
3
 
function reducer(state: State, action: Action): State {
  // ...
}

You can also validate that you have handled every single type of action by using the empty type in your default case.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
// @flow
type State = { +value: boolean };

type FooAction = { type: "FOO", foo: boolean };
type BarAction = { type: "BAR", bar: boolean };

type Action = FooAction | BarAction;

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "FOO": return { ...state, value: action.foo };
    case "BAR": return { ...state, value: action.bar };
    default:
      (action: empty);
      return state;
  }
}

Flow + Redux resources

← Flow + React