State Machine with external actions

states.js

type Props = {
  load(): void,
}

type States = {
  mode: 'loading' | 'loaded' | 'errors',
  data: any,
}

const actions = {
  loading() {
    return { mode: 'loading', data: {} })
  },
  loaded(data) {
    return { mode: 'loaded', data }
  },
  error(error) {
    return { mode: 'error', data: error }
  }
}

class DataLoader extends React.Component<{}, State> {
  state = actions.loading()
  componentDidMount() {
    this.props.load()
     .then(({ data, error }) => {
       if (error) {
         this.setState(actions.loaded(data))
       } else {
         this.setState(actions.error(error))
       }
     })
  }
  render() {
    const { mode, data } = this.state
    switch(mode) {
      case 'loading':
        return <Loading />
      case 'loaded':
        return <Loaded data={data} />
      default:
        return <Error data={data} />
    }
  }
}