この辺を読みながらfluxの各パーツの役割、reduxの登場人物について 自分のめもとしてまとめてみた

http://rackt.github.io/redux/index.html

reduxの思想

  • 1つ情報源を正とする
    • アプリケーションの状態は1つのstoreオブジェクトが管理する
  • stateはリードオンリー
    • 状態を変更する唯一の方法はactionを発行すること
  • 状態の遷移はただの関数によって行う
    • 状態を変更するための処理はreducersに定義する

fluxの登場人物

  • actionCreator
    • actionを作るための関数
    • ajaxリクエストなどの処理を行い、結果を含めたactionを作成する
  • action
    • アプリケーションで何が起きたのかとそれに付随するデータ
    • nTypeと任意のデータを持つ単なるObject
    • acitonCreatorによって作成されてdispacherに渡される
    • reduxでは、actionCreatorによって作成され、store.dispatch関数に渡される
  • store
    • アプリケーションのstateを持っている
    • store.dispatch関数を通じてstoreのstateを更新する
    • reduxではstoreは内部的にredux自体が管理しているので自作する必要はない
  • view
    • reactコンポーネント
  • dispatcher
    • actionを受け取り、actionTypeに対応するstoreのcallback関数を呼び出しのステートを変更する
    • reduxではdispatcherというオブジェクトは存在しない、代わりにdispatchメソッドによってstoreのstateを変更するためのreducerが呼び出される

reduxの登場人物

  • Provider(component)
    • ルートのコンポーネントとしてreactコンポーネントをラップする
    • propsとしてstoreを受け取りreduxのオブジェクトに登録する
    • 渡されたstoreはconnect()でラップされたコンポーネントを通じて共有される
    • この共有は内部的にはreactのcontextが利用されている
    • reactjs の contextの機能自体は、undocumentedな状態
  • reducer 関数
    • reduxではstateをreduxオブジェクトが内部的に管理する
    • よくあるfluxのstoreのstateを変更する部分(callbacks)のみを切り出したのがreducer
    • reduxを使う人が作るのは、目的に応じたreducer関数
    • reducerは現在のstateとactionを受け取り、新しいstateを返す関数
    • reducerは、アプリケーションの規模に応じてstateを部分的に担当するreducerとして分割することもできる
    • stateの部分毎に複数のreducerに分担する場合は、combineReducers()を利用すると便利
    • fluxのstoreとは異なり単なる関数なのでテストを行い易い
    • http://rackt.github.io/redux/docs/basics/Reducers.html
  • middleware 関数
    • dispatchする前、した後にそれぞれ任意の処理を追加することができる仕組み
    • 例えばつぎのようなことができる
    • dispatch前と後のstateの状態をログイ出力する
    • 特定の条件を満たす場合にdispatchしないなど
  • dispatch 関数
    • action指定してstoreのstateを更新するためのメソッド

redux の 全体像

redux を構成する各レイヤーについては図があると分かりやすいのでこのページが良さそうでした。

http://staltz.com/unidirectional-user-interface-architectures.html

actionとreducer

actionは何が起きたのかを伝えるための事のみを記述するべき アプリケーションの状態を変えるようなことをするべきではない reducerの役割はアプリケーションの状態を変えること

reducerのなかでするべきでないこと

  • 引数として渡されてきた変数・オブジェクトを変更すること
  • APIを呼び出したり、ルーターによる遷移を行うこと

APIを呼び出すのは、ActionCreatorまわりでやろうよってことだと思ってる あくまで、actionで渡された値を元にstateを変化させるだけにしようってことかな

connect()について

connectメソッドを使って、共通のpropsを持つ親コンポーネントを作れる connectメソッドを使ってラップされたコンポーネントはdispatch, props, state を受け取ることができるようになる ラップしたコンポーネントが対象、子孫コンポーネントには共有されない 計画なくどの階層のコンポーネントでもラップしてしまうと 各コンポーネントのコミュニケーションの流れが壊れるのでラップしすぎないように注意が必要

contextについて

突然、reactのcontextなるものが登場してるけどなにか? 親コンポーネントから 子、孫など配下のコンポーネントで値を 共有することのできる便利な仕組み ただし、今現在は、ドキュメントには記述されてないが(0.13現在)

https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

参考

Recent Entries