Why does React Flow reject this approach? - react-hooks

Question

I'm building a React app with the Context API and React Hooks. I'm trying to follow best practices. To that end I'm using Flow and am trying to adhere to its warnings.
I have a situation where once the user logs in, I want to store some data about this user in a SessionContext I've built. Given that there are only 3 pieces of data right now and they're all primitive, I thought it made sense to have just one Reducer Action:
export const sessionReducer = (state: SessionState, action: SessionAction) => {
switch (action.type) {
case UPDATE_SESSION_PROP: {
return {
...state,
[action.propName]: action.payload
};
}
default: {
return state;
}
}
}
Here are the Action types I created to account for the 3 types of data:
export type UserEmailAction = {type: 'UPDATE_SESSION_PROP',
propName: 'currentUserEmail',
payload: string};
export type UserAccessLevelAction = {type: 'UPDATE_SESSION_PROP',
propName: 'currentUserAccessLevel',
payload: number};
export type CurrentCompanyNameAction = {type: 'UPDATE_SESSION_PROP',
propName: 'currentCompanyName',
payload: string};
In my SessionContext I combine these 3 Action types as follows, and then define a Dispatch type from that:
export type SessionAction =
| UserEmailAction
| UserAccessLevelAction
| CurrentCompanyNameAction;
type Dispatch = (action: SessionAction) => void;
There are 4 warning messages over top of sessionReducer in this code:
const [state: SessionState, dispatch: Dispatch] = useReducer(sessionReducer, defaultState);
The messages are akin to this: "Cannot call useReducer with sessionReducer bound to reducer because number [1] is incompatible with string [2] in property currentCompanyName of the return value."
Did I define the Action types incorrectly or is Flow just not intelligent enough differentiate the 3 patterns? By the way, this approach seems to work fine when run.

Answer 1

Flow isn't intelligent enough. But you can use different approach that flow will understand:
type SessionState = {
currentUserEmail: string,
currentUserAccessLevel: number,
currentCompanyName: string,
};
type SessionAction = {
type: 'UPDATE_SESSION_PROP',
payload: $Shape<SessionState>,
};
const sessionReducer = (state: SessionState, action: SessionAction) => {
switch (action.type) {
case UPDATE_SESSION_PROP: {
return {
...state,
...action.payload
};
}
default: {
return state;
}
}
}
https://flow.org/try/#0JYWwDg9gTgLgBAbzgVwM4FMBK6AmyDG6UcAvnAGZQQhwDkU6AhvjLQNwBQH+EAdqvACqABQAiAQQAqAUQD6AZWnz5ASQDyAOVnDMa4XAC8dERJkKlqzdt3D2XGAE8w6OPPSpUwPvJiMYLowQOODh8ZCgGXhhBDChpEEZgABsALjgBKGBeAHMAGmDQ8Mjo2PF8Qg8AGXQAN3RUuF5kEAAjInyQsIj0KIBhajBGXgcNRhB0NIysvI4STg50AA9IWDhHZ1d3Tz4ymC9eQ0QC9YnjMSk5RWV1LR09Wg64QYckiEYcNIASeQALRmcADxuDz7Hx+dAAPnyc3sThcomAqEGMHwP0OAApmHs+GlgdteLt9gBKQwQuA1CDAHDzHDofBJRgMcmMuC08iMZBJGBg-y4rag3z+eY8fjwDAgvjYPCEYhGdECcF8iW8HnoXJwLH7JX4wl8EkGMlBEKoADuwBRaMxLH2ADoTiSjSFQowMHATBdzNcrHdhGlHU64AwYOEDv6A3AbZGFf5HuGI5HNXwbc9Xu8CgGYRmuAG2RyuX7006gyH0oL0JwsyESLMuCKBHAANrR054gXg9U4RHI1FpBFIvyogC6hzQWFwBCI8v5kvHMo76HZnO5ZaJbCAA
It will reduce overall amount of code also so I don't think it's too bad.