Reduxで状態管理を楽にする Part2

Redux
とんぺい
とんぺい

前回のReduxの座学はためになったブゥ…

今回は実際にReduxのコーディングの仕方を教えてもらおうっと!

師匠!こんにちは!

師匠
師匠

とんぺいくん。こんにちは。

前回は『Reduxとは何か』ということを簡単に説明したね。

今回はCODEPENというサイトを使って、実際にReduxのコーディング演習をしてみよう!

とんぺい
とんぺい

楽しみだブゥ!

よろしくお願いします!

CODEPENを使ってみよう

師匠
師匠

早速、CODEPENのサイトに移動しよう。

CODEPENはブラウザ上でHTML、CSS、JavaScriptのコーディングができるサービスで、変更を加えるとすぐにプレビューが表示されるので、お試しでコードを書いてみたいという時はすごく重宝するサービスなんだ。

とんぺい
とんぺい

ほぅほぅ…

それは便利なサービスだブゥ!

師匠!サイトにアクセスできたよ!

師匠
師匠

それでは、下の画像にあるように『Start Coding』ボタンをクリックして早速コーディングを進めていこう。

とんぺい
とんぺい

了解だブゥ!

CODEPENのLandingページ
師匠
師匠

コーディングページへ移動したら、Reduxをコーディングできるように設定を行おう。以下の画像のように『Setting』ボタンをクリックして、『Redux』と検索し、『Save & Close』or『Close』ボタンで設定画面を閉じよう。ついでにデベロッパーツールのコンソール画面を開いて準備は完了だよ。

とんぺい
とんぺい

は〜い!

コンソール画面まで開いて準備は万端だブゥ!

CODEPENの設定画面

Action creatorとActionを作成する

Action creatorとAction
師匠
師匠

それでは、いよいよ本番の開始だ。

前回座学で勉強した、簡易的な銀行の業務フローをReduxでコーディングしてみよう。

とんぺい
とんぺい

わかったブゥ!

まずは何から書けばいいんだブゥ?

師匠
師匠

まずは、『Action creator』と『Action』を作成してみよう。

今回は『入金』、『出金』、『口座停止』の3つの『Type』のActionを生成するよ。以下のようにコーディングしてみよう。

とんぺい
とんぺい

ふんふん。

『Action creator』では、『Action』を定義して、シンプルに『Type』と『Payload』

師匠
師匠

そうだね。

余談だが、ES2015以降ではオブジェクトのKey名とValue名が一緒の場合は、valueを省略できるので、name: nameのところをnameと書くことができるよ。

とんぺい
とんぺい

あっ、すっかり忘れてたブゥ!!

省略できるところは省略して見やすいコードを書くことを意識しなくちゃね!

師匠
師匠

『Actoin creator』と『Action』の部分に問題が内容なら、次に進むけど大丈夫かい?

とんぺい
とんぺい

今の所、大丈夫だブゥ!

どんどん次に進みましょ!

Reducersを作成する

Reducers一覧
師匠
師匠

では、次は『Reducers』を作成するよ。

Reducersでは、受け取った情報を元に『顧客』、『取引履歴』、『残高』を更新するプログラムを記述するよ。

とんぺい
とんぺい

『Reducers』は書くことがたくさんだブゥ!!

師匠、解説をお願いします!

師匠
師匠

任せてくれ。

まずは顧客管理の更新を行うaccountに注目しよう。

ここでは、受け取ったactiontypeによって、新規に口座を作成するか、既存の口座を削除するかをswitch文で条件分けをしているよ。

とんぺい
とんぺい

actiontypeDEPOSIT_MONEYのときは何をしているブゥ?

師匠
師匠

DEPOSIT_MONEYの際には、配列のfindメソッドを使用して、actionpayloadから渡されたユーザー名がすでに登録済みであるか確認を行なっているよ。登録済みだったら何もしない、登録が済んでいなかったら新規に口座を開設する、というロジックを組んでいるよ。

とんぺい
とんぺい

なるほどブゥ〜

じゃあ、actiontypeDELETE_ACCOUNTの場合はどうなるんだブゥ?

師匠
師匠

この場合には、すでにstore内に存在するアカウント一覧と、actionpayloadで渡される名前を比較して、一致しない名前だけで再度配列を作り直すという処理を行なっているんだ。

とんぺい
とんぺい

ふんふん。

すでにあるアカウント一覧から、actionpayloadで渡された名前のみを削除しているということブゥね!

師匠
師匠

その通り。

他にも取引履歴を更新しているtradingRecordでは初期値として空の配列であるlistOfTradingを宣言して、お金が入金されたり、引出されたりする度にlistOfTradingに取引履歴を追加しているんだ。

とんぺい
とんぺい

残りの残高の合計を更新しているallBalanceでは、初期値としてsumOfBalance10000と宣言して、入金があればsumOfBalanceに足した値を、出金があればsumOfBalanceから引いた値をそれぞれ新しく作成しているってことブゥね!

師匠
師匠

さすがとんぺいくん!その通りだ!

『Reducers』は完璧そうだから、次は『Store』の作成に進もう。

Storeを作成する

師匠
師匠

『Store』は『Reducers』を元に作成されるよ。

以下のコードのようにcreateStorecombineReducersを『Redux』からimportして、『Store』を作成しよう。

とんぺい
とんぺい

ここではどんな処理が行われているブゥ?

師匠
師匠

combineReducersで、作成した複数の『Reducers』を1つにまとめ、createStoreの引数として渡すことで、作成した『Reducers』を元にした『Store』が作成されるっていう処理が行われているよ。

とんぺい
とんぺい

ほぅほぅ。

ここは結構理解しやすいブゥ!

師匠
師匠

では最後に『dispatch』を通して、『Action Creator』を発火させ、実際にステートの更新を行なってみよう。

Stateの更新を行う

Reduxによる状態遷移が正常に行われた際のコンソール画面
師匠
師匠

以下のコードを記述して実際にStateを更新しよう。

うまくいけば、画像のような結果がデベロッパーツールのコンソール画面に出力されるはずだ。

とんぺい
とんぺい

うん!うまくいったブゥ!

あっ、でも僕の2000円が引出されないまま口座が削除されたブゥ!!

師匠
師匠

あくまでサンプルだから、あまり細かいことは気にしないように。

それでは最後に『Redux』の状態遷移図と今回のサンプルコード全体を載せておくので、しっかり復習をしておくように。サンプルコードはGithubにも載せておくので、そちらも参考にしてくれ。

まとめ

コメント

  1. […] 前回はCODEPENというサイトを使って、実際にReduxのコーディング演習をしたね。今回は、いよいよReactアプリケーションの中でReduxを使ってみよう。 […]

タイトルとURLをコピーしました