reduxを郵便屋さんに例えてみた

reduxにはそれなりの学習コストを支払うわけだが、自分の頭の中の整理をするときに、郵便屋さんに例えると理解が進んだのでまとめておく。
例えとして微妙な部分がある気がするので、redux理解のためのちょっとしたヒントくらいに思ってください。

これまでのjQueryを使ったDOM操作

jQueryをベースとしたDOM操作での開発は、簡単に実装できるが故に秩序を保つのが大変だった。
例えるならばバーゲンセールのようなもので、乱雑にワゴンに置かれたものを各々が自由に情報を取得して、自分でその状態を持っていた。（addClass()にはお世話になったなぁ。）

reduxで秩序を

reduxには登場人物がいる

• Action

  • 届けたいものリスト

• ActionCreator

  • 届けるもの置き場

• Dispatch

  • 封筒とかダンボール

• Reducer

  • 仕分けして発送する人

• Middleware

  • 何でも屋さん

• Store

  • 中央お荷物受取所

• Component

  • 人

１個１個説明していく。

Action（届けたいものリスト）

まずワゴンに乱雑に置かれたものを、綺麗に分けよう。
郵便屋さんにお願いするにも、何を送ればいいのかを明確にする必要がある。
その意思を宣言するためにも、届けたいものリストをつくる。
ここで決めたものには、それぞれに名前をつけておくこと。

ActionCreator（届けるもの置き場）

届けたいものをひとまとめにしておこう。
送るものは１つかもしれないし、２つかもしれない。
どのActionを使うかが決まってからでないと、何を送るかわからない場合もある。
こいつには忘れずに、Actionでつけておいた名前を付箋で貼っておこう。

Dispatch（封筒とかダンボール）

郵便屋さんに頼むときには、ActionCreatorでまとめたものを、封筒やダンボールに入れる必要がある。
ちゃんと入れておかないと郵便屋さんは働いてくれない。

Reducer（仕分けして発送する人）

受け取ったものを頼りに、発送してくれるのがこいつ。
こいつは完全に流れ作業しかしないロボットみたいなやつだ。

ただちょっと変わり者で、受け取ったものをそのまま配送はしない。
必ず錬金術をつかって、新しいものを作り出してそれを送ってくれる。
「こいつを赤くしてくれ」というメモと、ボールが送られてきたら
新しく赤いボールを生み出してそれを送る。そういう奴だ。

Middleware（何でも屋さん）

突如現れたイレギュラーのように見えるが、郵便を頼むときって結構細かい注文をすることがある。
日時指定したかったり、再配達時にどーのこーのとか。
そういう色んなことを請け負ってくれるのがこの人である。

Store（中央お荷物受取所）

Reducerから送られてきたものは、必ずここに全て集められる。
この施設にあるものは誰でも自由に見に来ていい。
そう、見に来るのは自由。

Component（人）

これは、今までバーゲンセールに参加してた僕らだ。
だけどこれからはワゴンじゃなくて、Storeに綺麗に置かれたものを使える。
なにがどういう状態かってのは、Storeを見ればいつでもわかるんだ。あぁなんて便利なんだ。

redux三原則はつまりこういうこと

Single source of truth

Storeは世界に１箇所しかない。
何か情報が欲しかったら、ここへ問い合わせること。
なぜならこの施設が絶対的正義だから。こいつがカラスは白だといったら白なのだ。

State is read-only

Storeに荷物を入れられるのは郵便屋さんだけ。
入れたかったらまた同じ手順を踏んでくれ。

Mutations are written as pure functions

Reducerは変なことはしない。
受け取った情報をもとに、新しい何かを生成して発送する。ただそれだけ。
それ以上でも以下でもない。

reduxにしておくと何が良いのか

拡張性

何か増やしたい場合、やることは毎回決まっている。

1. 届けるものを決める（Action/ActionCreator）
2. 仕分け発送ロボットに命令を追加する（Reducer）
3. そうするといつもと同じところで情報が参照できる。（Store）
4. あとはどう表示するかを考えるだけだ（Component）

バグフィックス/テスト

ちゃんと中央お荷物受取所に目的のものは届いているか？
届いてない→　郵便屋さんが悪い（Action〜Reducer）
届いてた→　使う側が悪い（Component）

なるほど。

ユニットテストは？
→郵便屋さんが意図通りの入出力をするか（Action〜Reducer）
→中央お荷物受取所の状態のとおりに表示がされているか（Component）

なるほど。

reduxは必要なのか？

なんか書き起こしたら余計わけがわからくなった気がしなくもないが、要するに役割分担しようってことだ。

何がどこで行われているかは明確になるけれど、
郵便屋さんシステムを理解する必要があるし、郵便屋さんシステムを毎回使うのが面倒臭い。

届けたいものが少ないなら（つまり複雑じゃないもの）、バーゲンセール状態の方がすぐに作れて楽チンなのは間違いない。

まぁ大体複雑になっていくんだけども。