Reduxで状態管理を楽にする Part1

Redux
とんぺい
とんぺい

今日は三連休の最終日かぁ~

よし、休みの日こそしっかり勉強して、実力をつけるブゥ!

師匠こんにちは!

師匠
師匠

やぁ、とんぺいくん。今日も元気がいいね。

それでは今回は、Reactでアプリ開発を行う際に広く使われている『Redux』というもの勉強しよう。

とんぺい
とんぺい

おぉ!

また新しい用語が出てきたブゥ!

よろしくお願いします!!

Reduxとは

師匠
師匠

『Redux』とはステート管理ライブラリの一種のことで、Reactのみでアプリケーションを作成するのに比べて、より手軽に複雑なアプリケーションを作成できるようになるよ。

とんぺい
とんぺい

なるほど…

『Redux』を導入することで、React単体で作る時に比べて、複雑なアプリケーションが簡単に作成できるお助けアイテムってことブゥね!

具体的に、どういったものなんだブゥ?

師匠
師匠

そうだね…

いきなりReduxの機能を話始めると混乱するだろうから、リアルな世界にあるものを例にして、Reduxの説明を進めていこう。

Reduxを理解する

銀行業務を例にReduxを説明
師匠
師匠

Reduxでステートを更新する際には次の5つの要素が必要になるんだ。

『Action creator』,『Action』,『dispatch』,『Reducers』,『Store』

上の画像では、Reduxでステートを更新する流れを銀行の業務の流れに例えているよ。

とんぺい
とんぺい

おぉ、なるほど!?

だけど、『Action』とかの専門用語に関してはさっぱりだブゥ…

師匠
師匠

一つずつ解説していくから安心してくれ。

まずは、『Action creator』,『Action』から説明を進めていこう。

『Action creator』と『Action』

Action creatorとAction
師匠
師匠

顧客が銀行側に、この額で入金をしたいという申し出を受付用紙に書くとしよう。『この行為』が、Reduxにおける『Action creator』と同じ役割をになっているんだ。そして、顧客が書いた『受付用紙』がReduxにおける『Action』になるよ。

とんぺい
とんぺい

ほぅほぅ…

つまり、口座の情報を変更してもらうには、『受付用紙』という『Action』を作り出す必要があって、その受付用紙を作り出すという行為が『Action creator』ってことであってるブゥ?

師匠
師匠

その通り。

また、Actionには『Type』と『Payload』という情報を記載する必要があるのだが、今回は『Type = 入金』、『Payload = 名前、金額』というようになっているんだ。 Actionを作成する際には、『Type』に『入金、出金、口座停止』など銀行側に行なって欲しい業務を書いて、『Payload』にその業務に必要な情報を載せるというルールになっているんだよ。

とんぺい
とんぺい

なるほど!

つまり、どういったステート更新を行なって欲しいのかという指示書を作成するのが、『Action creator』と『Action』の役割なんだブゥね!

師匠
師匠

そうだね。

では次は、『dispatch』と『Reducers』について説明を進めよう。

『dispatch』と『Reducers』

dispatchとReducersの関係
師匠
師匠

まずは『dispatch』の役割を説明しよう。

『dispatch』は受け取った『Action』のコピーデータを作成し、各Reducersにデータを渡す、といった役割があるよ。

とんぺい
とんぺい

ほぅほぅ。

つまり、受付用紙をもらった受付の人が、顧客の要望に対して各部署に仕事を振り分けているということブゥね!

師匠
師匠

その通り。

そして『Reducers』では受け取ったデータを元に、あらかじめ実装されているロジックで新しいステートを作成するんだ。

とんぺい
とんぺい

ふんふん。

受付の人から渡されデータを元に、実際にデータの更新を行うのは各部署の仕事ということブゥね!

師匠
師匠

そうだね。

では次は、実際に更新したステートを一括で管理している『Store』に関して説明をしよう。

『Store』の役割

師匠
師匠

『Store』はアプリケーションに必要なステートを一括で管理しているんだ。『Reducers』で新しく作成されたステートは必ず『Store』で保管され、外部からステートを参照したい時は必ず『Store』に問い合わせるというルールになっているよ。

とんぺい
とんぺい

う〜ん…

『Reducers』から『Store』に伸びている矢印はわかるんだけど、『Store』から『Reducers』に伸びている矢印はなんなんだブゥ?

師匠
師匠

Reduxでは各機能の役割分担がはっきりされており、『Reducers』ではステートの管理を一切行わないんだ。そこで、ステートの更新を行う際には、『Store』と『dispatch』からデータを渡すことで新しいステートを作成することができるんだ。

とんぺい
とんぺい

なるほど!

なんとなくだけど、『Redux』を用いたステート更新の流れが理解できた気がするブゥ!

師匠
師匠

それはよかった。

おそらく一回で『Redux』の流れを理解するのは難しいと思うので、何回も復習して理解していこう。

それでは、最後にまとめを書いて今回は終わりにしよう。

まとめ

Reduxのデータフロー
  • 『Action creator』: Actionを作成する。
  • 『Action』: ステート更新の仕様書
  • 『dispatch』: 受け取ったActionを元にReducersを発火させる。
  • 『Reducers』: dispatchとStoreのデータを元に新しいステートを作成する。
  • 『Store』: Reducersで作成されたステートを一括で管理する 。

コメント

  1. […] 前回は『Reduxとは何か』ということを簡単に説明したね。 […]

タイトルとURLをコピーしました