createSelector
selectorを合成し、適切にmemo化する
引数
inputSelectors
普通のselector
複数持てる
最後の引数はresultFunc
メモ化されたselector
inputSelectorsの返り値が前回と同じならば、resultFuncを呼ばずに前回の値を返す
code:ts
const s = createSelector(
s => s.PostReducer.postsMap.posts,
posts =>
posts.posts
.map(postId => postsMappostId) .sort(sortDescBy(p => moment(p.info.updatedAt)))
);
const useGetTimeline = (): PostBaseStateView[] => {
const posts = useSelector(s => s.PostReducer.timelinePosts);
return useSelector(s);
};
selectorは毎度呼び出されているが、第2引数の関数は呼び出されていない
Store内の複数のstateから一つの値を作る例
code:ts
const mySelector = createSelector(
state => state.values.value1,
state => state.values.value2,
(value1, value2) => value1 + value2
)
引数を取る場合に気をつける点
型付け
code:ts
declare module 'reselect' {
function createSelector<Value, Result>(
selector: (s: ReduxState) => Value,
memo: (s: Value) => Result
): (s: ReduxState) => Result;
}
これでいいのか？
型定義ファイルあるっぽい
内部実装の概要
resultFuncはどういう条件で呼び出される
これがわからないと中でmapとかしていいのかの判断ができないmrsekut.icon*4
何がしたいかと言うと
selectorの返り値を見て、変わっているなら、resultFuncを実行して、それが変わっているなら、componentをrenderingしてほしい
つまり2度のmemo化をしてほしい
なぜcreateSelectorを使う？
自作するより楽だから？
どうらく？
resultFunc自体もmemo化されているのか