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

コンパイラかく語りき

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

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

Redux

Reduxのお勉強。いよいよ大詰めです。

前回は、コンテナコンポーネントで作成したpropsを、プレゼンテーションコンポーネントで利用するように追記をしました。

 

chuckwebtips.hatenablog.com

 

今回はその中でも、ページ送りのクリックイベントについて見ていきます。

 

スタイル調整

クリックイベントを仕掛けたページ送りのボタンについて、ややスタイルを追加しました。

その結果がこんな感じ。

f:id:chuck0523:20160321073103p:plain

もう最低限の外面はできた感じです。

これでページ送りができれば、スライドとしての機能は満たせます。

 

ページ送り関数

ページ送り関数を見ていきます。

ちなみに、現在ページ送りボタンをクリックすると何も起きません…。何かがおかしい。

 

Slideコンポーネントで使っているprevPage, nextPage関数はそれぞれ、コンテナコンポーネントであるSwipeコンポーネントで定義しました。

f:id:chuck0523:20160321073528p:plain

 

ここにデバッグを仕込んでみます。

f:id:chuck0523:20160321073636p:plain

 

これで、前ページに戻ろうとすると、'clicked!'が表示されるはずです。

f:id:chuck0523:20160321073843p:plain

このボタンを押すと…、

 

f:id:chuck0523:20160321073858p:plain

出ました!

関数自体はSwipeからSlideへと渡っているようですね。

 

次に、現在ページを表すcurrentPageをデバッグしてみます。

f:id:chuck0523:20160321074327p:plain

 

この状態でクリックをすると、

f:id:chuck0523:20160321074415p:plain

0と出ました。きちんと現在ページ出てます。

 

ただし、連打すると、

f:id:chuck0523:20160321074454p:plain

値が変わってません!

stateの更新がされていない???

 

今度はactionでデバッグ

f:id:chuck0523:20160321074848p:plain

 

結果は変わらず。

f:id:chuck0523:20160321074909p:plain

 

(格闘すること30分)

 

stateの理解が誤っていました。解決したんですが、説明が難しい…。

reducerでstateを更新する際、reducer毎にstateオブジェクトにプロパティが作られるみたいなんですね。

なので、state.reducer_nameといった形式で、stateを参照する必要がありました。

 

詳しくは、Githubにあげたサンプルをご覧ください。

github.com

 

というわけで、無事にイベントが発動して、スライドが完成しました。

次回はよりスライドっぽくなるようにおまけ的なことをします。