読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

自分なりに順を追って、Reduxを理解する(6)

Redux

引続きReduxのお勉強です。

前回は、ちょっと脇道に逸れて、Webpackとスタイルについて書きました。

chuckwebtips.hatenablog.com

 

今回こそ、Reduxのactionを書きます。

 

Stateの設定

そもそも、actionを決めるにはStateを決める必要があります。

ひとまず、状態として「現在のページ」を設定します。

 

Actionの作成

スライドなので、考えられるActionは「ページ送り」だと思われます。

なので、ページ送りactionを実装します。

 

こんな感じですかね。ひょっとしたら後で書き換えるかもしれません。

gistc8b7b08ccab9e57faa8d

 

actionについては、こちらをご参照ください。

qiita.com

 

コンテナコンポーネントの作成

ついに来ました。コンテナコンポーネントの作成です。

いきなりですが、以下のようになりました。

gist040c974d245d264068a5

 

mapStateToProps関数は、ここでreturnした内容がpropとして参照できるような関数です。

「現在のページ」情報をスライドで使いたいので、propに渡しておきます。

 

mapDispatchToProps関数は、dispatcherにactionを渡す関数を、プレゼンテーションコンポーネントで使えるようにします。

この記述のおかげで、プレゼンテーションコンポーネントでonPrevClick関数とonNextClick関数が使えるようになります。

 

App.jsでの読み込み修正

スライドのためのコンテナコンポーネントを作成したので、App.jsからの呼び出しを修正します。

もともとSlideコンポーネントを直接読んでいたのを、Swipeコンポーネントを呼ぶように変更します。

gist5e78799edd527cffa4d0

 

コンテナコンポーネントがReduxとReactの接点だという話が、ようやく分かってきました。

次回はreducerを書きます。