flowtype と immutablejs メモ

会社のプロジェクトに flow を導入しようとしたメモ。
環境は以下。

  • React
  • Redux
  • Redux-Observable
  • Immutable
  • normalizr

今どきのテンプレのようなフロントエンド環境です :sparkle:

flow のインストール

https://qiita.com/takanorip/items/603365d2471104ac7d51 を参照

immutable.js のtypeを使う

e.g.

// @flow
import React from 'react';
import { Map } from 'immutable';
import type { Map as MapType } from 'immutable';

type Props = {
  users: MapType,
  selected: string,
};

type State = {
  selected: string,
};

export default class UserSelector extends React.Component<Props, State> {
  static defaultProps = {
    users: new Map()
  };
  constructor(props: Props) {
    super(props);
    this.state = { selected: props.selected };
  }
  componentWillReceiveProps(nextProps: Props) {
    if (nextProps.selected) {
      this.setState({ selected: nextProps.selected });
    }
  }
  render() {
    this.props.users.valueSeq().map(user => (
      <div>
        {user.get('id') === this.state.selected && <p>{user.get('name')} selected</p>}
        {user.get('id') !== this.state.selected && <p>{user.get('name')}</p>}
      </div>
    ));
  }
};

こんな感じ。動作確認してないですが、たぶん動くんじゃないかと予想 :thinking: