selectThing<\/code><\/a>:<\/p>\n\ninputSelectors<\/code>: The first argument, the dependencies, is an array of root state selectors<\/li>\ncombiner<\/code>: The second argument, the result function, calculates the derived state<\/li>\ncreateSelectorOptions<\/code>: The third (optional) options argument configures how the selector behaves<\/li>\n<\/ul>\nimport { createSelector } from \"@reduxjs\/toolkit\";\n\nconst selectMyTodosCompletedCount = createSelector(\n [\n (state: RootState) => state.todos,\n (state: RootState) => state.user.id,\n ],\n (todos, userId) => {\n return todos.filter(todo => todo.userId === userId && todo.done).length;\n }\n)\n\n\n\/\/ Usage in a component\nimport { useSelector } from \"react-redux\";\n\nconst TodosDoneCount = () => {\n const doneCount = useSelector(selectMyTodosCompletedCount);\n return <>\u2714\ufe0f {doneCount}<\/>;\n}\n<\/code><\/pre>\nEvery time the root state changes, it will execute the inputSelectors; in this case state.todos<\/code> and state.user.id<\/code>. If the returned references have not changed, the memoized count is returned, otherwise the combiner is executed.<\/p>\nThis is also why you want to select the todos and the userId separately, if you select them as ({todos: state.todos, userId: state.user.id})<\/code>, you\u2019d get a new reference every time, effectively rendering the selector useless!<\/p>\nThe Reselect development-only inputStabilityCheck<\/code><\/a> executes the selector twice and logs a warning to the console if one of the inputSelectors returns a different reference.<\/p>\nWith Parameters<\/h2>\n
Filter the todo list with a needle parameter.<\/p>\n
const selectTodos = createSelector(\n [\n (state: RootState) => state.todos,\n (_, needle: string) => needle,\n ],\n (todos, needle) => todos.filter(todo => todo.text.includes(needle))\n)\n\n\/\/ Usage in a component\nconst TodoList = ({searchNeedle}) => {\n const todos = useSelector(state => selectTodos(state, searchNeedle));\n return todos.map(todo => (\n <Todo key={todo.id} todo={todo} \/>\n );\n}\n<\/code><\/pre>\nIf you don\u2019t like this syntax, see the Reselect FAQ<\/a> on how to create a curried selector instead.<\/p>\n\/\/ This would allow you to do this instead:\nconst todos = useSelector(selectTodos(searchNeedle));\n\n\/\/ The FAQ also contains a recipe to turn this into:\nconst todos = useSelectTodos(searchNeedle);\n<\/code><\/pre>\nMultiple Parameters<\/h3>\nconst selectTodos = createSelector(\n [\n (state: RootState) => state.todos,\n (_, needle: string) => needle,\n (_, __, caseSensitive: boolean) => caseSensitive\n ],\n (todos, needle, caseSensitive) => { \/* magic here *\/ }\n)\n<\/code><\/pre>\ncreateSelectorOptions<\/h2>\n
Reselect will only execute the combiner fn when the inputs have changed, which is typically your entire root state (with potentially additional parameters) AND the result of those input selectors has changed.<\/p>\n
![\"How](\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-images\/reduxjs-toolkit-reselect-how-it-works.png\" "\\"How")
<\/p>\n
Configure this behavior with argsMemoize(Options)<\/code> and memoize(Options)<\/code>.<\/p>\nIf you want to change the default behavior of many\/all selectors, use createSelectorCreator<\/a>.<\/p>\nlruMemoize<\/h3>\n
lruMemoize<\/code><\/a> (Least Recently Used) was the default before v5 of Reselect. It had a default cache size of 1, meaning a recomputation every time one of the inputSelectors changed.<\/p>\nThe \u201cproblem\u201d with lruMemoize was that a cache of size 1 might not be that useful! This was typically solved with useMemo<\/code> or by passing memoizeOptions: { maxSize: 5 }<\/code>.<\/p>\nimport { lruMemoize } from \"reselect\";\nimport { shallowEqual } from \"react-redux\";\n\nexport const selectMyTodosCompletedCount = createSelector(\n [(state: RootState) => ({todos: state.todos, userId: state.more.users.ids[0]})],\n ({todos, userId}) => todos.filter(todo => todo.userId === userId && todo.done).length,\n {\n memoize: lruMemoize,\n memoizeOptions: {\n equalityCheck: (a, b) => a.todos === b.todos && a.userId === b.userId,\n \/\/ resultEqualityCheck: shallowEqual,\n \/\/ maxSize: 10\n },\n \/\/ argsMemoize: lruMemoize,\n \/\/ argsMemoizeOptions: {\n \/\/ equalityCheck: shallowEqual,\n \/\/ resultEqualityCheck: shallowEqual,\n \/\/ maxSize: 10\n \/\/ }\n }\n)\n<\/code><\/pre>\nweakMapMemoize (default)<\/h3>\n
weakMapMemoize<\/code><\/a> is the new default since v5 and provides a dynamic cache size out of the box.<\/p>\nunstable_autotrackMemoize (experimental)<\/h3>\n
There is also the experimental unstable_autotrackMemoize<\/code><\/a>, which, like proxy-memoize<\/code> below, can be more efficient.<\/p>\nimport { unstable_autotrackMemoize } from \"reselect\";\n\n\/\/ The combiner (todos.filter) will NOT execute when we\n\/\/ toggle a Todo between done\/not done as that field is\n\/\/ not accessed.\nconst selectTodos = createSelector(\n [\n (state: RootState) => state.todos,\n (_, needle: string) => needle,\n ],\n (todos, needle) => todos.filter(todo => todo.text.includes(needle)),\n {\n memoize: unstable_autotrackMemoize,\n }\n)\n<\/code><\/pre>\ncreateSlice<\/h1>\n
Common selectors can already be defined in the createSlice<\/code> setup.<\/p>\nconst todoSlice = createSlice({\n initialState: [],\n\n \/\/ Predefined selectors, which receive the slice's state as their first parameter.\n selectors: {\n selectTodo: (state, id: number): Todo | undefined => {\n return state.find(todo => todo.id === id);\n },\n },\n});\n\nexport const { selectTodo } = todoSlice.selectors;\n\n\/\/ Usage in a component\nconst todo = useSelector(state => selectTodo(state, todoId));\n<\/code><\/pre>\nTypeScript<\/h1>\n
See ReduxJS\/Toolkit: TypeScript<\/a> if you\u2019re unsure how to create the RootState<\/code>.<\/p>\nimport { createSelector } from \"@reduxjs\/toolkit\";\nconst createAppSelector = createSelector.withTypes<RootState>();\n<\/code><\/pre>\nDebugging<\/h1>\n
![](\"https:\/\/img.shields.io\/github\/stars\/skortchmark9\/reselect-tools.svg?style=social&label=Star\")
<\/a>skortchmark9\/reselect-tools<\/a>: Debugging Tools for Reselect<\/p>\nOnce you get many selectors depending on other selectors, you can use this tool to visualize re-computations.<\/p>\n
If your debugging needs are basic, you can check the Output Selector Fields<\/a>:<\/p>\nconst meta = {\n lastResult: selectMyTodosCompletedCount.lastResult(),\n recomputations: selectMyTodosCompletedCount.recomputations(),\n dependencyRecomputations: selectMyTodosCompletedCount.dependencyRecomputations(),\n}\n<\/code><\/pre>\nAlternatives<\/h1>\nproxy-memoize<\/h2>\n
![](\"https:\/\/img.shields.io\/github\/stars\/dai-shi\/proxy-memoize.svg?style=social&label=Star\")
<\/a>dai-shi\/proxy-memoize<\/a>: Intuitive magical memoization library with Proxy and WeakMap<\/p>\nThis will re-execute when the done<\/code> property toggles even though it has no impact on the actual result.<\/p>\nimport { createSelector } from \"reselect\";\n\nconst selectTodoDescriptionsReselect = createSelector(\n [state => state.todos],\n todos => todos.map(todo => todo.text)\n)\n<\/code><\/pre>\nWith proxy-memoize<\/code>, this would not be the case as due to the proxy, it figures only text is actually relevant for selector.<\/p>\nimport { memoize } from \"proxy-memoize\";\n\nconst selectTodoDescriptionsProxy = memoize(state =>\n state.todos.map(todo => todo.text)\n)\n<\/code><\/pre>\nFor this reason the ReduxJS\/Toolkit officially encourages you to consider using proxy-memoize as a viable alternative to Reselect.<\/strong><\/p>\nre-reselect<\/h2>\n
![](\"https:\/\/img.shields.io\/github\/stars\/toomuchdesign\/re-reselect.svg?style=social&label=Star\")
<\/a>toomuchdesign\/re-reselect<\/a>: Enhance Reselect selectors with deeper memoization and cache management.<\/p>\nAs of Reselect v5, what you\u2019d need this library for can now achieved with Reselect createSelectorOptions<\/code> natively.<\/p>\nAlso in this series<\/h1>\n\n- Part 1: ReduxJS\/Toolkit<\/a><\/li>\n
- Part 2: ReduxJS\/Toolkit: Immer<\/a><\/li>\n
- Part 3: ReduxJS\/Toolkit: createSlice and configureStore<\/a><\/li>\n
- Part 4: ReduxJS\/Toolkit: createAsyncThunk<\/a><\/li>\n
- Part 5: ReduxJS\/Toolkit: TypeScript<\/a><\/li>\n
- This Part: ReduxJS\/Toolkit: createSelector<\/li>\n<\/ul>\n
Extras<\/h1>\n
Stuff that came into being during the making of this post<\/b><\/p>\n\n- Check todoSelectors.ts to see the examples in action<\/a><\/li>\n<\/ul>\n
Other interesting reads<\/b><\/p>\n\n- React Component Profiling also goes into some detail with Reselect for performance optimalizations<\/a><\/li>\n<\/ul>\n
Package Versions <\/i><\/h1>\n![](\"https:\/\/img.shields.io\/github\/stars\/reduxjs\/reselect.svg?style=social&label=Star\")
<\/a>reduxjs\/reselect<\/a>: v5.1.1 <\/div>\n","protected":false},"excerpt":{"rendered":"<\/a>reduxjs\/reselect<\/a>: Create memoized \u2018selector\u2019 functions<\/p>\nOne of the Redux Style Guide \u201cStrongly Recommended\u201d rules is Keep State Minimal and Derive Additional Values<\/a>:<\/p>\nKeep the actual data in the Redux store as minimal as possible, and derive additional values from that state as needed.<\/p>\n