引続きReduxのお勉強です。
前回は、ちょっと脇道に逸れて、Webpackとスタイルについて書きました。
今回こそ、Reduxのactionを書きます。
Stateの設定
そもそも、actionを決めるにはStateを決める必要があります。
ひとまず、状態として「現在のページ」を設定します。
Actionの作成
スライドなので、考えられるActionは「ページ送り」だと思われます。
なので、ページ送りactionを実装します。
こんな感じですかね。ひょっとしたら後で書き換えるかもしれません。
actionについては、こちらをご参照ください。
コンテナコンポーネントの作成
ついに来ました。コンテナコンポーネントの作成です。
いきなりですが、以下のようになりました。
mapStateToProps関数は、ここでreturnした内容がpropとして参照できるような関数です。
「現在のページ」情報をスライドで使いたいので、propに渡しておきます。
mapDispatchToProps関数は、dispatcherにactionを渡す関数を、プレゼンテーションコンポーネントで使えるようにします。
この記述のおかげで、プレゼンテーションコンポーネントでonPrevClick関数とonNextClick関数が使えるようになります。
App.jsでの読み込み修正
スライドのためのコンテナコンポーネントを作成したので、App.jsからの呼び出しを修正します。
もともとSlideコンポーネントを直接読んでいたのを、Swipeコンポーネントを呼ぶように変更します。
コンテナコンポーネントがReduxとReactの接点だという話が、ようやく分かってきました。
次回はreducerを書きます。
