Type checking with Flow

Question

I have I question. I wrote a Flow type checker for checking my reducer. There was an error can you explain to me what is the cause of the error. This is my code.

// @flow
import {SET_USER} from "./action-types";
import type {SetUserAction} from "./user-actions"; // export type SetUserAction = (user: User) => Action;
export type State = {
    +username: ?string,
    +firstName: ?string,
    +lastName: ?string,
    +email: ?string,
    avatar?: ?string,
}

export type Action = SetUserAction;

const initialState: State = {
    username: null,
    firstName: null,
    lastName: null,
    email: null,
    avatar: null,
};

type Reducer = (state: State, action: Action) => State;

const userReducer:Reducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_USER:
            return {...action.payload};
        default:
            // (action: empty);
            return state;
    }
};

export {userReducer};

This is errors.

Error ----------------------------------------------------------------------------- src/redux/User/user-actions.js:25:48
Cannot assign function to setUser because a call signature declaring the expected parameter / return type is missing
in object literal [1] but exists in SetUserAction [2] in the return value.
src/redux/User/user-actions.js:25:48
25| export const setUser: SetUserAction = user => ({type: SET_USER, payload: user});
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
References:
src/redux/User/user-actions.js:24:45
24| export type SetUserAction = (user: User) => Action;
^^^^^^ [2]
Error ----------------------------------------------------------------------------- src/redux/User/user-reducer.js:26:20
Cannot get action.type because property type is missing in statics of function type [1]. src/redux/User/user-reducer.js:26:20
26| switch (action.type) {
^^^^
References:
src/redux/User/user-reducer.js:23:39
23| type Reducer = (state: State, action: Action) => State;
^^^^^^ [1]
Error ----------------------------------------------------------------------------- src/redux/User/user-reducer.js:26:13
Property type is missing in statics of function type [1].
src/redux/User/user-reducer.js:26:13
26| switch (action.type) {
^^^^^^^^^^^
References:
src/redux/User/user-reducer.js:23:39
23| type Reducer = (state: State, action: Action) => State;
^^^^^^ [1]
Error ----------------------------------------------------------------------------- src/redux/User/user-reducer.js:28:31
Cannot get action.payload because property payload is missing in statics of function type [1]. src/redux/User/user-reducer.js:28:31
28| return {...action.payload};
^^^^^^^
References:
src/redux/User/user-reducer.js:23:39
23| type Reducer = (state: State, action: Action) => State;
^^^^^^ [1]

thehogfather thehogfather · Accepted Answer · 2020-04-04T20:41:18

Based on what is posted, it might be difficult to diagnose the full cause of the error. However one thing to check is that based on this line

import type {SetUserAction} from "./user-actions"; // export type SetUserAction = (user: User) => Action;

you are defining the SetUserAction type as a function (probably an action creator) and later on you are aliasing Action to be the type SetUserAction which effectively means the action parameter in your reducer is a function.

export type Action = SetUserAction;

Consequently, when you switch on action.type, there will be a type error because there is no .type property on the SetUserAction type.

Hope this helps. It might not be the full picture of why there are errors but it will certainly a reason some of the error.

Type checking with Flow

1 Answers