こんにちは、エンジニアの籏野です。
フォルシアのアプリ開発ではアプリの状態管理にReduxを用いることが多いです。 Reduxから状態を取得するときに「reselect」という言葉が出てきますが、どのような点が嬉しいのかがいまいちわかっていなかったので調べました。
前準備
さくっとReduxを利用したアプリケーションを用意しましょう。
$ npx create-react-app redux-selector-experience --template redux-typescript $ cd redux-selector-experience $ npm run start
デフォルトではhttp://localhost:3000/ にアクセスすれば画面を参照できました。
今回作ったものはgithubにあげています。
確認
今回の確認のため、以下のようなsliceとcomponentを用意します。
// features/counter/counterSlise.ts import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { RootState } from "../../app/store"; export interface CounterState { count_1: { val: number; }; count_2: { val: number; }; } const initialState: CounterState = { count_1: { val: 0, }, count_2: { val: 0, }, }; export const counterSlice = createSlice({ name: "counter", initialState, // The `reducers` field lets us define reducers and generate associated actions reducers: { increment: (state, action: PayloadAction<keyof CounterState>) => { state[action.payload].val += 1; }, decrement: (state, action: PayloadAction<keyof CounterState>) => { state[action.payload].val -= 1; }, }, }); export const { increment, decrement } = counterSlice.actions; export const selectCount1 = (state: RootState) => { console.log("select count_1"); return state.counter.count_1.val; }; export const selectCount2 = (state: RootState) => { console.log("select count_2"); return state.counter.count_2.val; }; export default counterSlice.reducer;
// features/counter/Counter.tsx import { useAppSelector, useAppDispatch } from "../../app/hooks"; import { decrement, increment, selectCount1, selectCount2, } from "./counterSlice"; import styles from "./Counter.module.css"; export function Counter() { return ( <div> <Counter1 /> <Counter2 /> </div> ); } const Counter1 = () => { const dispatch = useAppDispatch(); const count1 = useAppSelector(selectCount1); return ( <div className={styles.row}> <span>COUNT1</span> <button className={styles.button} aria-label="Decrement value" onClick={() => dispatch(decrement("count_1"))} > - </button> <span className={styles.value}>{count1}</span> <button className={styles.button} aria-label="Increment value" onClick={() => dispatch(increment("count_1"))} > + </button> </div> ); }; const Counter2 = () => { const dispatch = useAppDispatch(); const count1 = useAppSelector(selectCount2); return ( <div className={styles.row}> <span>COUNT2</span> <button className={styles.button} aria-label="Decrement value" onClick={() => dispatch(decrement("count_2"))} > - </button> <span className={styles.value}>{count1}</span> <button className={styles.button} aria-label="Increment value" onClick={() => dispatch(increment("count_2"))} > + </button> </div> ); };
selector関数による再計算
出来上がったアプリケーション上で、COUNT1/COUNT2のどちらの値を+/-ボタンで変更した場合でもコンソールに以下の内容が出力されます。
// consoleの出力結果 select count_1 select count_2
ステートに変更があった場合にはすべてのselector関数が再計算され返り値によって、コンポーネントを再レンダリングするかどうかを制御することになります。 Reduxが管理するステートは1つの巨大なオブジェクトになっているそうなので言われてみれば当然なのですが、更新していない値のselectorが再計算されるのは驚きました。
これが問題になってくるのは、selector関数が何かしら重い処理を持っている場合になります。 ステートが変更されるたびにselector関数が再計算され、この重い処理が実行されることになっていしまいます。
以下のようにselectCount2を定義し直すと、COUNT1/COUNT2のどちらを変更しても「"very very heavy function"」が毎回出力されることがわかります。
const veryHeavyFunction = (count: number) => { console.log("very very heavy function"); // 何かとても重い処理 return count; }; export const selectCount2 = (state: RootState) => { console.log("select count_2"); return veryHeavyFunction(state.counter.count_2.val); };
// consoleの出力結果 select count_1 select count_2 very very heavy function
reselectを使う
上記の課題を解決するために利用するのがreselectになります。 reselectを使うことで重い処理部分をメモ化して、必要な時だけ処理を実行させることができるようになります。
import { createSlice, PayloadAction, createSelector } from "@reduxjs/toolkit"; ... export const selectCount2 = createSelector( (state: RootState) => state.counter.count_2, (count_2) => { console.log("select count_2"); return veryHeavyFunction(count_2.val) } );
Redux-toolkitでreselectを利用するには、createSelectorを使います。 createSelectorの定義は以下のようになっており、inputSelectorsの返り値に変更があった場合にのみresultFuncが実行されます。
createSelector(...inputSelectors | [inputSelectors], resultFunc, selectorOptions?)
先のようにselectCount2書き換えることで、COUNT2に変更があった時のみveryHeavyFunctionの処理が走っていることが以下の出力からもわかります。
// COUNT1を変更した場合 select count_1 // COUNT2を変更した場合 select count_1 select count_2 very very heavy function
まとめ
useSelectorは何気なく利用していましたが、その挙動やパフォーマンス観点での影響については理解できていませんでした。 今回の記事が少しでも皆さんの理解の助けになると嬉しいです。
籏野 拓
2018年新卒入社。
自動化大好きエンジニアを目指します
フォルシアではフォルシアに興味をお持ちいただけた方に、社員との面談のご案内をしています。
採用応募の方、まずはカジュアルにお話をしてみたいという方は、お気軽に下記よりご連絡ください。
※ 弊社社員に対する営業行為などはお断りしております。ご希望に沿えない場合がございますので予めご了承ください。