Discriminated/disjoint unions in Flow - flowtype

Question

I'm trying to make Flow happy.
It's not very, giving me this:
app/components/commands/types.js:117
117: { state: 'state-retries-timeout',
^^^^^^^^^^^^^^^^^^^^^^^ string literal `state-retries-timeout`. Expected string literal `state-initial`, got `state-retries-timeout` instead
60: { state: 'state-initial', touched: boolean }
But I don't see how I'm not following the documentation
Source code:
// #flow
/**
* A server-side validation message. Should contain a globally unique key
* and a message. The key can be used for internationalisation purposes.
*/
export type ValidationMessage =
{ key: string,
message: string }
export function validationMessage(key: string, message: string): ValidationMessage {
return { key, message }
}
/**
* The field is untouched in this user-session.
*/
export const StateInitial = 'state-initial';
/**
* The edit is not yet persisted anywhere.
*/
export const StatePending = 'state-pending'
/**
* The command is not yet committed on the server, but is committed locally.
*/
export const StatePendingSavedLocally = 'state-pending-saved-locally'
/**
* The command was successfully commited.
*/
export const StateSuccess = 'state-success'
/**
* The command was commited, but there are resulting warnings.
*/
export const StateSuccessWarnings = 'state-success-warnings'
/**
* The command or its data was invalid and the server returned 400 Bad Request;
* it may not be retried without changing it.
*/
export const StateRejected = 'state-rejected'
/**
* Despite numerous retries, the app failed to persist the change to the server.
*/
export const StateRetriesTimeout = 'state-retries-timeout'
export type Initial =
{ state: 'state-initial',
touched: boolean }
export type Pending =
{ state: 'state-pending',
touched: boolean }
export type PendingSavedLocally =
{ state: 'state-pending-saved-locally',
touched: boolean }
export type Success =
{ state: 'state-success',
touched: boolean }
export type SuccessWarnings =
{ state: 'state-success-warnings',
warnings: ValidationMessage[],
touched: boolean }
export type Rejected =
{ state: 'state-rejected',
errors: ValidationMessage[],
touched: boolean }
export type RetriesTimeout =
{ state: 'state-retries-timeout',
touched: boolean }
/**
* The discriminated union of all states we allow fields to be represented as.
*/
export type ValueChangeState =
| Initial
| Pending
| PendingSavedLocally
| Success
| SuccessWarnings
| Rejected
| RetriesTimeout
export const initial: ValueChangeState =
{ state: 'state-initial',
touched: false }
export const pending: ValueChangeState =
{ state: 'state-pending',
touched: true }
export const pendingSavedLocally: ValueChangeState =
{ state: 'state-pending-saved-locally',
touched: true }
export const success: ValueChangeState =
{ state: 'state-success',
touched: true }
export function successWarnings(warnings: ValidationMessage[], touched: boolean = true): ValueChangeState {
return {
state: 'state-success-warnings',
warnings,
touched
}
}
export function rejected(errors: ValidationMessage[], touched: boolean = true): ValueChangeState {
return {
state: 'state-rejected',
errors,
touched
}
}
export const retriesTimeout: ValueChangeState =
{ state: 'state-retries-timeout',
touched: true }
Sample usage
// #flow
/*eslint no-unused-expressions: 0 */
import { expect } from 'chai';
import { describe, it } from 'mocha';
import { initial, pending } from './types';
import { valueStateReducer } from './reducers';
import { successOf, rejectionOf, timeoutOf, successWarningsOf } from './actions';
describe('(Reducer) components/commands', function() {
describe('valueStateReducer', function() {
const noop = () => ({ type: 'NOOP' });
const testing = () => ({ type: 'commands/TESTING' });
const subject = valueStateReducer('commands/TESTING');
it('other makes no change', function() {
const res = subject(initial, noop());
expect(res).to.deep.eq(initial);
});
it('of action makes pending', function() {
const res = subject(initial, testing());
expect(res).to.deep.eq(pending);
});
});
});

Answer 1

The answer is that flow doesn't properly handle destructive assignment of nullable/undefined discriminated union/sum types when also providing a default value.
In this screenshot I default valueState to initial (one of the DU cases). This triggers the bug.
If I instead default further down, flow doesn't barf: