コンパイラかく語りき

import { Fun } from 'programming'

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

引き続きReduxの勉強です。

前回はreducerを書いたので、Reduxに必要な部品は全てそろいました。

chuckwebtips.hatenablog.com

 

今回は、コンテナコンポーネントでpropsに変換したstateや関数を、プレゼンテーションコンポーネントに組み込んでいきます。

 

Pageをデフォルトで非表示

まず、Pageのスタイルにdisplay: none;を追記します。

これで、スライドの全てのページが1時的に非表示となります。

gist50f9a963cb0de63ada62

 

propsをSlideからPageに受け渡す

Swipeコンテナコンポーネントで、propsを定義してSlideプレゼンテーションコンポーネントに渡しています。

なのでSlideからPageへと、さらにpropsを渡します。

また、その際にpropsに対して型や有無のチェックを行います。

 

Slideコンポーネントがこちら。

gistc31f8f9ab4c8e29787e3

Pageコンポーネントに現在のページ情報(currentPage)を渡しています。

また、divを2つ追加して、各々にprevPage, nextPage関数をonClickに割り当てています。これがスライド送りのボタンとなります。

 

Pageで受け取ったpropsを利用する

次に子コンポーネントであるPage側に追記をします。

gist0237a788ddca1665e881

 

このようになりました。

ここでポイントは、styleとして、currentPage=indexだったときにdispaly: block; を指定しています。

つまり、現在ページ=そのページの番号ならばページを表示します。そしてそれ以外のページを非表示化します。

 

以上で、propsのプレゼンテーションコンポーネントへの組み込みは完了です。

次回は、onClickで指定したページ送り関数についてです。