Flow doesn't infer type correctly

Question

I define an multiple subtypes in the Action creator in redux:

Action creator:

export type Action = { type: "SELECT", index: number } | { type: "OTHER" };

Reducer:

module.exports = (state: string = "", action: Action): string => {
    switch (action.type) {
        case "SELECT":
            return action.index;
        default:
            return state;
    }
};

but if I define SELECT in a constant const select = "SELECT" and implement it in the code above I obtain an error message:

property `index`. Property not found in object type

Note: Taking flow-pattern as it is F8 app:

https://github.com/fbsamples/f8app/blob/master/js/actions/types.js

How should implement it by avoiding having "SELECT" keyword both in the action and in the reducer?

Answer 1

You would normally have another constant with the action type, which would be used for both your action and reducer.

const SELECT = 'SELECT';

or even better (to avoid any conflicts):

const SELECT = 'redux/<module>/SELECT';

In the same action file or in another (that's totally up to you). Then just export like export const SELECT, and import like import { SELECT } from './constants'.

You should also take a look at redux-ducks, might be of your interest.

EDIT:

They use bitwise OR to group all possible different action cases. That helps testing whether the code is syntactically correct with flow (by setting their dispatched actions to match type Action). See their full explanation here.

That does not take away the fact that they have to dispatch the action with their desired action type though. login