今回利用するサンプルアプリケーションについてSelectorのメモ化を検証するにあたり、今回はTodo管理機能とカウンタ機能を組み合わせたアプリケーションを利用します。アプリケーションの仕様は以下の通りです。Todo」をクリックするとTodoを追加するActiongaが発行されるアプリケーションに保存されているStateの具体例は以下の通りです。4}SelectorについてSelectorとは、ReduxのStore内のStateから特定のデータを取得する関数のことをいいます。Selectorを作成することにより、コンポーネントはSelectorを呼ぶだけでStateから必要なデータが抽出できます。SelectorはあくまでStateからデータを抽出するための関数にすぎないため、Selectorの実装に別途ライブラリをインストールする必要はありません。Selectorの利用方法コンポーネントでSelectorを利用する方法は以下の2つがあります。Selectorの呼び出し方法useSelectorを利用するconnectの第一引数(mapStateToProps)を利用する具体的なサンプルコードを紹介します。ここでは例として、Stateに保存されているvisibilityFilterを取得するSelectorをコンポーネントで利用するケースについて考えてみます。useSelectorを利用した実装は以下の通りです。VisibilityFilters;connectを利用した実装は以下の通りです。connect(mapStateToProps)(VisibilityFilters);Selectorの特性についてSelectorは任意のアクションが発行(dispatch)されるたびに毎回実行されるという特性があります。これはuseSelectorを利用している場合もconnectを利用している場合も起こります。上記の特性について、冒頭で紹介したアプリケーションを利用して確認してみます。以下は、Stateに保存されているtodoの中から画面上に表示するtodoを抽出するSelectorです。}};Selectorの呼び出し側の実装は以下の通りです。TodoList;上記のSelectorはcountを利用しないため、countに関するActionには依存していません。カウントボタンをクリックした時もログをみてわかるようにSelectorが実行されています。ReselectについてReselectはメモ化されたSelectorを作成するためのライブラリです。Reselectが提供するcreateSelectorというAPIを利用することでSelectorがメモ化できます。ToolkitにはReselectがデフォルトでインストールされています。ReselectはReduxアプリケーションで利用されることが多いですが、Redux以外のJavaScriptアプリケーションでも利用可能です。先ほど紹介した「Selectorが毎回実行されてしまう」という問題点は、ReselectのcreateSelectorを利用してSelectorをメモ化することで解決できます。selectorOptions?)です。inputSelectorsはStore内の特定のStateを抽出するSelectorです。resultFuncはinputSelectorsによって取得されたStateを引数として受け取り、データ加工などの計算処理を行う関数です。selectorという名称で紹介しています。createSelectorはinputSelectorsの戻り値、つまりresultFuncの処理に必要なStateの値が厳密等価(===)において等しい場合、前回の計算結果を返します。複数のStateを引数に利用してresultFuncの計算をする場合、つまりinputSelectorsを複数定義する場合は、カンマ区切りもしくは配列でSelectorを並べます。state)関数は不適切です。resultFuncはinputSelectorsの戻り値を利用して変換処理を行う部分ですので、以下のようにinputSelectorsの結果をそのまま返すのは不適切です。todos)createSelectorのサンプルコード先ほど紹介した「Stateに保存されているtodoの中から画面上に表示するtodoを抽出するSelector」を例に、createSelectorのサンプルコードを紹介します。}};Selectorの呼び出し側の実装は以下の通りです。state.visibilityFilter;Selectorの呼び出し側の実装は以下の通りです。TodoList;createSelectorを導入したことで、ログからわかる通りアプリケーションのカウントボタンをクリックした時にはtodoに関するSelector(getTodosByVisibilityFilter)は実行されなくなります。さいごにTwitter(@nishina555)やってます。Reselect』reduxjs/reselectRECOMMENDJavaScriptReactツイートシェアはてブ1送るPocketプロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。