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

React
とんぺい
とんぺい

最近は寒くなってもうすっかり冬だブゥ…

でも寒さに負けず、今日もしっかり勉強するブゥ!

師匠、こんにちは!

師匠
師匠

とんぺいくん、こんにちは。

前回はCODEPENというサイトを使って、実際にReduxのコーディング演習をしたね。今回は、いよいよReactアプリケーションの中でReduxを使ってみよう。

とんぺい
とんぺい

おぉ!楽しみだブゥ!

今日もよろしくお願いします!

完成品

Image from Gyazo
師匠
師匠

今回は『映画のリストを取得して、選択された映画の詳細情報を表示する』といったアプリケーションを作成するよ。わざわざ、Reduxを使用しなくても作れる規模のアプリケーションだけど、まずはハードルを下げて一歩ずつ着実に実力を付けていこう。

とんぺい
とんぺい

わかりましただブゥ!!

今回はどのようなディレクトリ構成になるんだブゥ?

ディレクトリ構成&必要なパッケージ

師匠
師匠

ディレクトリ構成は上の表のようになるよ。

また今回はreduxの他に、ReactアプリケーションとReduxを関連づけるreact-redux、スタイルでscssファイルを使用可能にするためのnode-sassを事前にインストールしておこう。scssファイルについては今後解説を加えていくので、ひとまずはリンク先を参考にして欲しい。

とんぺい
とんぺい

わかったブゥ!

それじゃあ早速、create-react-appを使ってアプリケーション作成の準備に取りかかるブゥ!

うん。ディレクトリを整えて、SemanticUIと必要なパッケージのインストールも完了したし準備完了ブゥ!

師匠
師匠

うん。いい感じだね。

それでは早速アプリケーション作成・・・

と行きたいところだけど、まずはReduxをReactアプリケーションに組み込んだときのデータの流れを理解していこう。

とんぺい
とんぺい

なんだか難しそうだブゥ・・・

よろしくお願いしますだブゥ!

ReactアプリケーションにReduxを組み込む

今回のアプリケーションのデータフロー

①:StoreのデータをProviderに渡す

師匠
師匠

上の図は今回作成するアプリケーションのデータフローを示した図だよ。

番号に沿って、データの流れを説明していこう。まずは①からだね。

とんぺい
とんぺい

これはStoreからProviderというところにデータを渡しているところかな?

Storeは習ったことあるけど、Providerというのは初めて聞くブゥ・・・

師匠
師匠

Providerの目的は主に2つ存在するよ。1つ目は、Reactコンポーネント内でreact-reduxのconnect()関数を使えるようにすること。そして2つ目は、ProviderにStoreの情報をセットすることで、それよりも深いコンポーネントに対して、Storeからstateや、dispatchを提供できる状態にすること。

これを①の段階で行なっているんだ。

とんぺい
とんぺい

ほぅほぅ。

つまり、今まで作成してきたようなReactアプリケーションの上にProviderを被せて、storeの情報を設置してあげることで、Provider以下のコンポーネントでstoreの情報が利用できるということブゥね!

師匠
師匠

うん。概ね正解だね。

では次に②について説明しよう。

②:Providerとconnect関数

師匠
師匠

Reduxから各コンポーネントにデータを渡すためには、Providerにstoreを設置するだけではなく、データを必要とするコンポーネントでconnect関数を使う必要があるんだ。それを表したのが、②の流れだよ。

とんぺい
とんぺい

ふんふん。

このconnect関数があるおかげで、ReduxのStoreのデータを各コンポーネントに渡すことができるということブゥね!

師匠
師匠

その通りだ。

この①と②の流れがあるおかげで各コンポーネントは『this.props.オブジェクト名』とすることでStoreに保管されているstateを参照することができるよ。

ここまでは大丈夫かな?

とんぺい
とんぺい

うん!なんとかついてこれてるブゥ!

続きの説明をお願いします!

師匠
師匠

それはよかった。

では続きを進めていこう。

③Action creatorを取り込む

師匠
師匠

③では、Action creatorをReact側に渡しているよ。

この③の処理を行うことで、ボタンをクリックした際にデータ更新を行うといった、イベントを設置することができるんだ。

とんぺい
とんぺい

最初に見た、『ボタンを押すと映画詳細が切り替わる』というのもAction creatorがReact側に渡されているから、できることなんだブゥね。

でも実際に、このAction creatorはどうやって発火しているんだブゥ?

師匠
師匠

そうだね。

それに関しては④のところで説明しよう。

④:Reactアプリケーション内からReduxのStoreを更新する

師匠
師匠

④では③で受け取ったAction creatorを発火させることで、ReduxのStoreのデータを更新しようとする際のデータの流れを示しているよ。ここでもconnect関数の引数としてAction creatorを渡すことで、コンポーネント内でthis.props.ActionCreator名()としてAction creatorを発火させることができるんだ。

とんぺい
とんぺい

なるほどぉ・・・

なんかわかったような、わかんないような不思議な感覚だブゥ・・・

師匠
師匠

慣れるまではReduxを用いたアプリケーションの作成はとても複雑に感じるが、慣れてしまえば今後規模の大きいアプリケーションを作成するときに、状態管理が非常に楽になるので、身につけておいて損はないと思うよ。

とんぺい
とんぺい

わかったブゥ!

しっかり復習して、Reduxを用いたアプリケーション作成の方法を身につけるブゥ!

師匠
師匠

うん。いい意気込みだ。

では、実際にコードを書いてReduxを用いた簡単なアプリケーションを作成してみよう。ソースコードはpigmovieにも載せているので、参考にしてくれ。

アプリケーションの作成

Action creator

師匠
師匠

まずはActioin creatorの作成を進めよう。

このselectMovie(movie)では、選択された映画の情報をpayloadとしてreducerに渡すようにしているよ。

Reducers

師匠
師匠

ここでは映画の一覧を表示するためのmovieReducerと選択された映画の状態を更新するselectedMovieReducerの2つを作成しているね。今回は簡易的なアプリケーションにするために、映画の一覧はハードコーディングで静的なデータとしたよ。

Store

師匠
師匠

ここはsrcフォルダ直下のindex.jsだね。

Providerをreact-reduxから取り込んで、storeをreducersを基に作成し、storeをセットしたProviderコンポーネントでAppコンポーネントを囲むことで、各コンポーネントでconnect関数が使えるようになり、storeのデータを渡すことができるようになるよ。

Components

師匠
師匠

Appコンポーネントでは、それぞれMovieListコンポーネントとMovieDetailコンポーネントを読み込み表示しているね。

また、SemantiUIを使ってスタイルを整えているよ。

師匠
師匠

MovieDetailコンポーネントでは、connect関数を使ってStoreの情報を流し込むことによって、一覧から選択された映画の詳細を表示しているよ。mapStateToProps関数を作成することで、このコンポーネントに必要な分のデータのみ渡すことができるんだ。

師匠
師匠

MovieListコンポーネントでは、mapメソッドを使うことで取得した映画一覧のデータを繰り返し表示しているよ。

また、connect(mapStateToProps,{selectMovie})とすることで、このコンポーネント内でAction creatorが発火できるようにしているね。

Styles

師匠
師匠

最後に、このMovieDetail.scssで映画詳細欄の細かいスタイルを記述しているよ。このスタイルを施すことで、映画の画像とキャプションが横並びになるんだ。

まとめ

師匠
師匠

今回は『Reduxを組み込んだReactアプリケーションのデータフロー』を理解し、『簡単なアプリケーションの作成』を行なったよ。

とんぺい
とんぺい

うん!

実際にアプリケーションを作ったことで、理解が深まった気がするブゥ!

師匠
師匠

それはよかった。

では最後に、今回勉強した内容をもっと深く学びたいという人のために、参考になる記事のURLを貼っておくよ。

ではまた次回。

とんぺい
とんぺい

今日も楽しかったブゥ!

さようなら〜!

コメント

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