flowtype' Tagged Unions examples

flowtype-tagged-union.js

/* @flow */

type OneAction = {|
  kind: 'one',
  type: 'ONE_ACTION',
  one: string
|};

type TwoAction = {|
  kind: 'two',
  type: 'TWO_ACTION',
  two: number
|};

type Action1 =
  OneAction |
  TwoAction

function reducer1(state: Object = {}, action: Action1) {
  const {kind} = action;
  if (kind === 'one') {
    console.log(action.one);
  } else if (kind === 'two') {
    console.log(action.two);
  }
  return state;
}

// ---------------------

type Action2 =
  {type: 'ONE', payload: {one: number}} |
  {type: 'TWO', payload: {two: number}};

function reducer2(state: Object = {}, action: Action2): Object {
  if (action.type === 'ONE') {
    console.log(action.payload.one); 
  } else if (action.type === 'TWO') {
    console.log(action.payload.two);
  }
  return state;
}

v 0.41.0

https://flowtype.org/try/#0PQKgBAAgZgNg9gdzCYAoVAXAngBwKZgDyAdngIIDGGAlnMWALxgDeAPqmGANbXEAmALjAByOnmEAaDmGz4hwwgDkAogH0yAYQAqASSWTpYoQGcMAJ14BzVKwC+AbnSyCWhHEo06jFu049+8hhuBpzO8loA6oTq2nqKITJuQsQArgC2AEZ4ZjYOTrgEHrTEAIyM0iTkVMVgvmCu7tV06FApxE30Znh8KRTZJQAUpgCGGHhChBkAVnhU3sy2EmDDHUJFdCUAlCzSFHSmLP58tt4rnsSOnNRQYANHjAxMoqTC28zSnHvExnAweAB08EsAzOxX+Yk2lzAJzwMGMBGut3ujyeQTgrx2nE++1+AKBII6-zRkOktmkXQwKTM9BGY0cZNQwGAYAAtGz2RzOVz8vgwOtiAAmcqcZhhERKZSSMA4YZYeDDQQsIxgVKZbK2E51UUFcJRKUyuVwBVCUVJFXpLJmDWOVCtdrnMBdHp9MwCoYYUbjIjTWYYeaLZarPkdAWbCY+ubvK43AnnIkFB5PCUYqNYr4-P6AuDA0F0f4G+V8cGkSFgUlgWHwsCI2Ng5yJkSRQgpj5gdO4rM5wkFo1F4lQsmcClUmkeumoWxAA