Reduxの概要

Unityのアプリケーションのアーキテクチャを考えるのに、参考になるかと思ってJavaScript界隈の最近の流行を調べて見たので覚書。
JavaScriptもiOS界隈もそんなに詳しくないので、入門記事やそのサンプルなど眺めながら理解した内容です。

目次

TL;DR

ReduxはJavaScriptアプリのための、状態を管理するためのフレームワーク。
View、表示に関する責務はそれに特化したフレームワークに委ね、組み合わせて利用する事が多い。代表的なのはReact。

Redux + α

iOS ReSwiftを元にReduxを読み解く

一番解りやすかったのがiOS向けにReduxを説明した記事だったのでこのような形に。¹ 斜体はReSwift特有の事項。

• State
  • Data, POCO
  • Root（e.g. AppState）を起点としたツリー構造
  • Reducerに渡すものはStateTypeを継承してマーキング
• Action
  • 処理種別と入力パラメータを持つData, POCO
  • 処理手続きのための申請書みたいなイメージ
  • Actionを継承してマーキング
  • 「具体的にどう変化させるか」という結果ではなく、UseCase（何を指示するか）で定義する
    • 内部に持つAPIのインターフェースとして捉える
    • Redux における "ActionCreator & Action" の Best Practice を考えるのActionを参照
• Reducer
  • Actionを受理しStateを更新する
  • StateとReducerは対になる（つまりツリー、reducer composition）
  • ActionはすべてのReducerにBroadcastされる（伝搬）
  • 各Reducerは自身で判断し、対のStateを変更する
  • (state, action) => state を満たす副作用のない純粋関数
    • 引数の値を変更しない
    • API呼んだり、ページ遷移などダメ
    • 毎回結果の変わるものを使わない（現在日時とか乱数とか）
  • Root（e.g. appReduce）を起点に下位のReducerにブロードキャスト
• Store
  • シングルトン
  • データを保持する（「State+Reducer」のツリー）
  • Dispatchメソッドを提供する
  • 状態の変更通知するため、リスナー（View）を登録するメソッドを提供する
    • Dispatchの結果、登録されたリスナーに通知される
    • この時Storeから現在のStateを取得することもできる
• Dispatch
  • Actionを引数にStoreに手続きを依頼する窓口
• ActionCreator
  • Actionを構築し生成するだけ

Reduxの処理の関連図。

個人的なイメージはこんな感じ。

React

• Viewを表示することに特化したライブラリ
  • 入力は範囲外なので一方向バインディング
• 仮想DOM（Virtual DOM）
  • 生のDOM（HTMLのインスタンス）ではなく、対となるツリーな構造体
  • StateAとStateBのHTML的なdiffを取り差分を埋めるpatchを生成し、patchを適用することで状態を遷移させる（表示を変化させる）
  • 生のDOMを操作する文化から脱却

Redux(JS) 上級

• Middleware
  • ActionやReducerで必要になりそうな副作用のある処理や非同期処理はここに押し込める

イメージはこんな感じになるのかな。

まとめ

サーバーサイドはViewとそれ以外のModelって発想でModelを小さく表現してその実巨大なわけだけど、フロントサイドもMiddlewareと言うロジックを書く領域小さく表現してるが結構身が詰まってそうだなぁと。

HTMLはRootがあってそこからTreeがあるってのが大前提にあり、ReduxもReactもそれを踏まえた上での仕組みですね。
UIデザインの構成もコンポーネント志向により親子構造を構築する流れもありそうだし、全体通して方向性が一致してていいのではと思う。

一方UnityはHierarchyがツリー構造ではあるものの、全然枝葉の違う所同士で割と縦横無尽に関係を築きたがるし、相互に関連するものも多いので、Tree縛りでUI、状態を構成するとなると相当に大変かなと思う。Unityそのものを喰らうぐらいの思想とパワーがないと厳しかろうて。
部分的に親子構造を持ちつつ親が子を操作するのではなく、伝播させるって仕組みくらいは参考になりそうなならなそうな、使い所は考えたい。

参考

• Redux+Rxを活用したiOSアプリアーキテクチャ
• Redux における "ActionCreator & Action" の Best Practice を考える
• Redux入門【ダイジェスト版】10分で理解するReduxの基礎
• はじめに · Redux
• なぜ仮想DOMという概念が俺達の魂を震えさせるのか
• JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット | dwango creators' blog（ドワンゴクリエイターズブログ）
• Facebookが作ったJavaScriptライブラリ、Reactの威力を体感する - 技術ブログ | 株式会社クラウディア

---

1. Redux+Rxを活用したiOSアプリアーキテクチャ↩