宮水の日記

宮水の日記

主に書評や資格取得について記事を書いています。

reselect【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する


本日は、reselectのドキュメントを読んで実際に業務で使っているところを調べました。

Philosophy、Motivation、Back Story

なし

ドキュメント

今回読んだドキュメントはこちらです。
github.com

Youtubeも貼ってあったので、みました。
www.youtube.com

実際に使ってみる

Memoizedって単語が出てきた...!メモ化(
メモ化 - Wikipedia
)の話だ!

最終的に、英語で読むのがきつかったのでQiitaに頼りました。
私も同じこと調べてるのにここまでわからなかったので、わかるようなエンジニアになりたいです(´;ω;`)
qiita.com

Redux には「state はアプリケーション全体で1つのツリーオブジェクトである(Single source of truth)」という原則があるが、state のツリーが巨大になったとき、たいてい各コンポーネントで関心のある state はツリーの中のほんの一部にしかすぎないはずなのに無関係なツリーの更新によって計算処理が何度も実行されてしまうのは無駄である。

これを解決してくれるのがこのライブラリです。

ざっくり言うと、Selector は state の中から自分が関心のあるツリー部分だけを抜き出してきて
抜き出してきたパラメータから必要な計算を行う。

Reduxの利点もよくわかってないので2割もわからなかったのですが、stateの管理(状態やメモリー的な意味で)って本当に大変そうですね。(小並感)

3行以内でまとめる

reselectを導入すると、

  • 関心のあるstateだけ計算してくれるので、計算量が節約できる。

以上です!