_.mapKeys()を用いたObject-Based Reducers

React

今回のゴール

とんぺい
とんぺい

師匠こんばんは。

前回の続きを勉強しに来たブゥ!

師匠
師匠

とんぺいくん、こんばんは。

前回は、JSON Serverを使ってデータベースを構築し、ItemをDBに送信するpostメソッドを実装したね。

とんぺい
とんぺい

うん。JSON Serverの構築の仕方もしっかり復習したし、ItemをDBに保存する方法もバッチリだブゥ!

師匠
師匠

それは良かった。では今回は、作成したItemの一覧を取得して、画面に表示する機能の実装を進めよう。

とんぺい
とんぺい

了解だブゥ!!

今回は、どんなディレクトリ構成になるんだブゥ?

ディレクトリ構成 & パッケージ

師匠
師匠

今回のディレクトリ構成と追加するパッケージは以上のようになるよ。作成したItemの一覧を取得するために、新しくAction creatorとReducerを定義しよう。

とんぺい
とんぺい

わかったブゥ!

とりあえず、必要なファイルは全部揃えたよ!

師匠
師匠

よし。

では次に、今回の講義の重要な点を共有しよう。

今回のKey Point

師匠
師匠

今回の講義では、DBで受け取った配列データをlodashmapKeys()を用いてオブジェクトに変換する、というところが重要になるよ。

とんぺい
とんぺい

mapKeys()っていうメソッドは初めて聞いたな〜

一体どういったメソッドなんだブゥ?

師匠
師匠

_.mapKeys()は以下のように、オブジェクトのvalueは変えずに、keyのみを変更して、新しいオブジェクトを作成できるメソッドだよ。

とんぺい
とんぺい

ほぅほぅ。オブジェクトのkeyのみを変更できるメソッド…

理解できたブゥ!

でも、今回は配列に対して_.mapKeys()を使っているけど、その場合はどのような挙動になるんだブゥ?

師匠
師匠

配列に対して、_.mapKey()を使うと、上の画像に示したように、指定したkey(今回はid)のvalueを新しいkeyとして、配列をオブジェクトに変換することができるんだ。

とんぺい
とんぺい

なるほど〜。

でも、なんで今回はわざわざ配列をオブジェクトに変換する必要があったんだブゥ?

師匠
師匠

それは、Reducerでデータ処理を行う際に、配列データを扱うよりもオブジェクトデータを扱ったほうが簡単に実現したい処理を実装できるからだよ。作成したItemを編集する場合のロジックを示して説明しよう。

師匠
師匠

まずは、配列データを扱った場合のReducerを見てみよう。

作成されたItemを編集するためには、

state.map()を用いてstateにあるItemの中から、編集するItemを検索

・検索して条件(id一致)に当てはまるItemの状態を変更する

といったロジックが必要になるよ。

とんぺい
とんぺい

うん。

コードを見てどのような処理をしたいのかは、大体想像がつくブゥ。

オブジェクトを使うとこの処理がどのように変わるんだブゥ?

師匠
師匠

オブジェクトデータを扱う際のReducerはこのようになるよ。

case "EDIT_ITEM"の中の処理が、配列データを扱った際には6行だったものがオブジェクトに変換することで1行に減ったことがわかるね。

とんぺい
とんぺい

うん!コードの量が減ったことは理解できたブゥ!

だけど、その1行のコードの中身がまだ理解できないから、解説してほしいブゥ…

師匠
師匠

任せてくれ。まずは...stateを解説しよう。

これは、スプレッド構文と言って、以下に示すように、配列やオブジェクトの中身を全て展開することができるよ。

とんぺい
とんぺい

なるほどぉ〜。

2つのオブジェクトを基に新しいオブジェクトを作りたいと思った時に便利そうだブゥ!

師匠
師匠

では次に、[action.payload.id]: action.payloadの部分について解説しよう。[action.payload.id]は配列ではなく、オブジェクトのkeyを指定しているよ。今回の様に、オブジェクトのkeyに変数を使いたい場合には[ ]を用いて記述することで、actionから渡されたidをkeyに持つオブジェクトが編集されるようになるんだ。

とんぺい
とんぺい

ふんふん。

一回理解してしまえば、今後すごく使えそうな構文ばっかだブゥ!

師匠、解説ありがとうございました。

師匠
師匠

よし。

では、今回のKey Pointを理解できたところで、Item一覧を取得するための実装を進めていこう。

実装しよう!

actions

師匠
師匠

Actionsでは新しくFETCH_ITEMSというactionのtypeを追加しよう。

そして、fetchItemsというaction creatorを作成し、axiosのget()を使ってDBから、Item一覧を取得するよ。 

reducers

師匠
師匠

ここでは、今回のKey Pointで説明した_.mapKeys()を使用して取得した配列データをオブジェクトに変換して、Storeに状態を保存するようにしているよ。またcombineReducerにも新しくkeyとvalueを追加しているね。

とんぺい
とんぺい

前回作成した、Action creatorのcreateItem()が発火した際のReducerも、追加してあるブゥ〜

components

師匠
師匠

ここでは

connect()を用いてAction creatorとStoreのstateを渡す

componentDidMount()を用いて、fetchItems()を発火させる

・Storeのstateを配列に変換して取得する

・配列に変換したデータをmap()で一覧表示する

といったロジックが組まれているよ。

とんぺい
とんぺい

なるほどぉ〜。

ここではmap()を使用するために、オブジェクトに変換したデータをまた配列に戻すんだブゥねぇ〜。

師匠
師匠

そうだね。オブジェクトのままだと、map()が使えないので、状況に応じて配列とオブジェクトを変換して、うまく使っていこう。

とんぺい
とんぺい

了解しました。今後、たくさんのデータを扱うときは、配列で扱ったほうがいいのか、それともオブジェクトで扱ったほうがいいのか、しっかり考えてから、実装を進めていくブゥ!

師匠
師匠

ぜひ、そのようにしてくれ。

では最後に今回のまとめをして、終わりにしよう。

まとめ

師匠
師匠

今回は以下のことを学んだね。

_.mapKeys()を用いたオブジェクトベースのReducer

・スプレッド構文

・オブジェクトのKeyに変数を用いる方法

とんぺい
とんぺい

うん。どれも今後の実装でたくさん使いそうなことばかりだブゥ!

家に帰ってしっかり復習します!

今日もありがとうございましただブゥ。

師匠
師匠

今日もお疲れさまでした。

次回は、投稿したItemと投稿したユーザの紐付けの仕方を勉強していこう。

コメント

  1. […] 前回は_.mapKeys()を用いた、Object-Based Reducerを勉強したね。 […]

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