ReactorKitの生みの親も登壇した「ReactorKit Meetup Japan」レポート

「ReactorKit at Wantedly」Jiro Nagashima, Wantedly

• 登壇資料（永島次朗氏）

　永島次朗氏で「ReactorKit at Wantedly」というタイトルでの発表です。永島氏はiOSエンジニアで、現在Wantedlyにおいてユーザグロースチームのリーダーをしています。

　この発表では、ReactorKitがシンプルかつ強力であることを、Wantedly VisitのiOS Appにおける具体的なユースケースを通して説明しています。

導入されているiOS Appについて

　Wantedly Visitは、気になる会社に気軽に遊びに行くことのできるサービスです。iOS Appでは募集の検索やプロフィール、チャットなどの機能があり、これらは非常に多くの状態管理を必要とします。ReactorKitはこれらすべての面倒を見てくれるのです。昨年の2017年に1画面で導入し、2018年現在ではほとんどの画面で利用されています。

シンプル

　実際に導入して感じたこととして、ReactorKitが非常にシンプルであることを強調しており、3つのメリットを挙げています。「記述量が少ないこと」「理解しやすいこと」「コードレビューしやすいこと」です。特に、コードレビューしやすい点に関しては、どこに何が書かれているかが明確なためコードが追いやすいことが要因にあります。

強力

　永島氏はReactorKitがシンプルというだけでなく、強力であることも伝えています。実際の実装例として3つのケースを挙げました。

1. ブックマークの状態を表示する
2. ブックマークの状態を他のViewコンポーネントへ伝搬させる
3. 異なるViewコンポーネントで同じリソースを共有する

ブックマークの状態を表示する

　まず、「ブックマークの状態を表示する」についてです。このケースでは、画面が読み込まれたときにAPIリクエストを実行し、その結果を表示します。

　Viewのbind関数では2つのbindがあります。ひとつは、viewDidLoadが呼ばれた際にAction.loadをReactorに伝えるもので、もうひとつは、state.isBookmarkingをブックマークボタンに伝えるものです。Reactorを見ると先ほど登場したActionとStateが定義されており、またMutationでMutation.setProject(Project)が定義されているのがわかります。mutateでは、APIリクエストを行うprojectRepositioryの関数が呼びされておりProjectのObservableが返ってきます。ここでさらにMutation.setProjectにマップすることでMutationに変換しています。次にreduce関数では、渡ってきたMutation.setProjectを処理しています。ここではstate.isBookmarkingを反映しているのがわかります。

Fig. 4.1 Viewのbind関数（登壇資料：page 16より引用）

Fig. 4.2 ReactorのAction, Mutation, State（登壇資料：page 18より引用）

Fig. 4.3 Reactorのmutate関数とreduce関数（登壇資料：page 19より引用）

ブックマークの状態を他のViewコンポーネントへ伝搬させる

　さて、次にこのブックマークの状態を他のViewコンポーネントでも表示したいケースについてです。Visit iOS Appでは、募集の一覧画面でもブックマークの状態が表示されているため、ここにも状態を反映します。一般に、詳細ページと一覧ページで状態を共有したいケースは数多く存在するかと思います。こういったケースでは、共有するストリームを作成します。ストリームへの流し込みはRepositoryレイヤで行います。次に受け取りたいViewコンポーネントに対応するReactorのtransform関数を利用します。transform関数ではmutationのストリームにマージすることができるため、共有のストリームからMutationに変換してマージします。これだけで、状態を簡単に共有することができます。

Fig. 4.4 詳細画面での変更をEvent Streamを介して一覧画面のReactorに伝える（登壇資料：page 22より引用）

Fig. 4.5 Repositoryで共有のストリームに変更を通知（登壇資料：page 24より引用）

Fig. 4.6 Reactorのmutate関数ではRepositoryを呼びemptyを流す（登壇資料：page 25より引用）

Fig. 4.7 Reactorのtransform関数で共有のストリームから変更のイベントを受け取る（登壇資料：page 27より引用）

異なるViewコンポーネントで同じリソースを共有する

　最後に、異なるViewコンポーネントで同じリソースを共有するケースです。VisitのiOS Appでは各会社の情報を見ることのできる会社ページが存在します。この会社ページには、ページ内にタブがあり遷移することができます。例えば、最初に表示されているホームタブと募集タブでは、共通のリソースである募集のコレクションを表示します。

　もうすでにお気づきだと思いますが、このケースにおいても先ほどのブックマークと同様に共通のストリームを作成し、transform関数でMutationとしてマージします。これにより異なるViewコンポーネントで常に同じリソースを表示することができます。

Fig. 4.8 各企業の情報を閲覧できる会社ページ（登壇資料：page 29より引用）

Fig. 4.9 募集一覧画面のReactorで取得した内容を共有ストリームを介してホーム画面にも反映（登壇資料：page 32より引用）

まとめ

• 複雑な状態管理を実現できる
• 多くのユースケースはカバーできる