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

コンパイラかく語りき

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

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

Redux

Reduxのお勉強です。

前回はactionと、コンテナコンポーネントを作成しました。 

chuckwebtips.hatenablog.com

 

今回は、reducerという、stateとactionを受け取ってstateを更新する処理を書きます。

qiita.com

 

起点となるReducerの作成

まずは全てのreducerの起点となるindex.jsを作成します。

gist455672c1566d6ad012ae

 

とは言え、今回作成するreducerは1つだけですが。

 

slide Reducerの作成

次に、slideイベントのreducerを作成します。

gisteb0f7c63cd7e4e356341

かなりシンプルですが、このようになりました。

 

個別reducerを作成したので、起点となるreducerファイルに追記します。

gist6118d13432b79e522230

 

CreateStateへの追記

さて、一番最初に書いた、アプリケーションのエントリーファイルであるindex.jsに追記します。

gist55c6968ee0498055b2fc

 

これで、storeにreducerを渡すことができました。

 

ディレクトリ構造の確認

今回までで必要なファイルは全てそろいました。

f:id:chuck0523:20160321050153p:plain

 

次回はふたたびプレゼンテーションコンポーネントの作成に戻ります。