javascript react プログラミング 開発ノウハウ

Reactのみで実装したサンプルに、Reduxを導入する

投稿日:

 

こんにちは、mabuiです。
前回の記事で取り上げた、Reactのみで実装したサンプルに
Reduxを導入していきます。
動作は前回とまったく同じで、仮想通貨の上位10銘柄を表示して、
名前、金額、時価総額、出来高でソートできる機能と、金額表示を切り替える機能をつけています。

Reduxを使用すると、ReactのコンポーネントそれぞれでsetStateメソッドを
使用して実行していたstateの状態管理を、
storeという役割の場所で一元管理できるため、
見通しのいいプログラムが書けるようになります。

 
 

redux, react-reduxのインストール

まずは使用するライブラリをインストールします。
コマンドラインで下記を実行します。

 
 

役割ごとのファイル作成

ファイル一枚でも完結できますが、役割ごとにディレクトリ、
ファイルを分割します。

ざっくり処理の流れは
container → component → actions → reducers です。

 

containerではcomponentの前処理を担当します。

mapStateToPropsメソッドではstateの情報をpropsに渡して、
componentの好きな場所で状態を参照できるようにします。

 

mapDispatchToPropsメソッドではactionsをdispatchメソッドに渡して、
reducersに送ります。
bindActionCreatorsメソッドを使用して、actionsをまとめて実行しており、
actionsのメソッド内でdispatchしています。

 

componentは前回までの記事でも登場したReactのコンポーネントで、
JSXのタグをレンダリングする処理を記述します。

前回までのロジックではヘッダー情報を同じstateに混ぜ込んでいましたが、
分離しました。
createHeader メソッドを見るとわかるように、
mapDispatchToPropsメソッドに渡したactionsのメソッドは、
this.propsから自由に呼び出せるようになっています。

 

actionsではビジネスロジックを記述して、dispatchメソッド経由で
reducersに結果を渡します。

非同期処理を行っているため、redux-thunkを使用していて、
そのためactionsのメソッドの返り値はオブジェクトではなく
全て関数になっています。
bindActionCreatorsメソッドからdispatchメソッドが渡ってきているため、
メソッド内で使用できます。

 

このへんを理解するのに時間がかかりましたが、
redux-thunkを使用するとactionsは返り値をメソッドにできるかつ、
dispatchメソッドの引数にメソッドを与えて実行できるようになるため、
その処理内の好きなタイミングでdispatchメソッドを使えるようになります。
そのため、非同期処理内でもdispatchが実行できるようになるのです。
Actions.setCoins()では、fetch、さらにはsetTimeoutの内部でdispatchを
実行して非同期処理の結果をreducersに送っています。

 

reducersはactionsからの結果を元に、storeに情報を送り、
stateの状態を更新します。
更新が発生すると再度レンダリングが走り、画面が更新されます。

 
 

まとめ

Reduxを導入することでコンポーネントがすっきりしました。
またsetStateメソッドを使わないことで、状態の更新処理が隠されて、
コードの見通しが良くなったかと思います。

 

今回作成したコードはgithubに公開しています。

 

-javascript, react, プログラミング, 開発ノウハウ
-, ,

Copyright© mabui.org , 2018 All Rights Reserved Powered by STINGER.