[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3759":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":16,"lastSyncTime":28,"discoverSource":29},3759,"reselect","reduxjs\u002Freselect","reduxjs","Selector library for Redux",null,"TypeScript",19033,660,159,31,0,2,9,43.46,"MIT License",false,"master",[23,24],"memoized-selectors","redux","2026-06-12 02:00:53","# Reselect\n\n[![npm package][npm-badge]][npm][![Coveralls][coveralls-badge]][coveralls][![GitHub Workflow Status][build-badge]][build]![TypeScript][typescript-badge]\n\nA library for creating memoized \"selector\" functions. Commonly used with Redux, but usable with any plain JS immutable data as well.\n\n- Selectors can compute derived data, allowing [Redux] to store the minimal possible state.\n- Selectors are efficient. A selector is not recomputed unless one of its arguments changes.\n- Selectors are composable. They can be used as input to other selectors.\n\nThe **Redux docs usage page on [Deriving Data with Selectors](https:\u002F\u002Fredux.js.org\u002Fusage\u002Fderiving-data-selectors)** covers the purpose and motivation for selectors, why memoized selectors are useful, typical Reselect usage patterns, and using selectors with [React-Redux].\n\n## Installation\n\n### Redux Toolkit\n\nWhile Reselect is not exclusive to [Redux], it is already included by default in [the official Redux Toolkit package](https:\u002F\u002Fredux-toolkit.js.org) - no further installation needed.\n\n```ts\nimport { createSelector } from '@reduxjs\u002Ftoolkit'\n```\n\n### Standalone\n\nFor standalone usage, install the `reselect` package:\n\n```bash\n# NPM\nnpm install reselect\n\n# Yarn\nyarn add reselect\n```\n\n---\n\n## Documentation\n\nThe Reselect docs are available at **https:\u002F\u002Freselect.js.org**, and include usage guides and API references:\n\n- [**Introduction**](#https:\u002F\u002Freselect.js.org\u002Fintroduction\u002Fgetting-started)\n- [**How Does Reselect Work?**](#https:\u002F\u002Freselect.js.org\u002Fintroduction\u002Fhow-does-reselect-work)\n- **API Reference**:\n  - **[`createSelector`]**\n  - **[`createSelectorCreator`]**\n  - **[`createStructuredSelector`]**\n  - [**Development-Only Stability Checks**](#https:\u002F\u002Freselect.js.org\u002Fapi\u002Fdevelopment-only-stability-checks)\n  - **[`lruMemoize`]**\n  - **[`weakMapMemoize`]**\n- [**FAQ**](#https:\u002F\u002Freselect.js.org\u002FFAQ)\n\n## Basic Usage\n\nReselect exports a [`createSelector`] API, which generates memoized selector functions. [`createSelector`] accepts one or more [input selectors], which extract values from arguments, and a [result function] function that receives the extracted values and should return a derived value. If the generated [output selector] is called multiple times, the output will only be recalculated when the extracted values have changed.\n\nYou can play around with the following **example** in [this CodeSandbox](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Freselect-example-g3k9gf?file=\u002Fsrc\u002Findex.js):\n\n```ts\nimport { createSelector } from 'reselect'\n\ninterface RootState {\n  todos: { id: number; completed: boolean }[]\n  alerts: { id: number; read: boolean }[]\n}\n\nconst state: RootState = {\n  todos: [\n    { id: 0, completed: false },\n    { id: 1, completed: true }\n  ],\n  alerts: [\n    { id: 0, read: false },\n    { id: 1, read: true }\n  ]\n}\n\nconst selectCompletedTodos = (state: RootState) => {\n  console.log('selector ran')\n  return state.todos.filter(todo => todo.completed === true)\n}\n\nselectCompletedTodos(state) \u002F\u002F selector ran\nselectCompletedTodos(state) \u002F\u002F selector ran\nselectCompletedTodos(state) \u002F\u002F selector ran\n\nconst memoizedSelectCompletedTodos = createSelector(\n  [(state: RootState) => state.todos],\n  todos => {\n    console.log('memoized selector ran')\n    return todos.filter(todo => todo.completed === true)\n  }\n)\n\nmemoizedSelectCompletedTodos(state) \u002F\u002F memoized selector ran\nmemoizedSelectCompletedTodos(state)\nmemoizedSelectCompletedTodos(state)\n\nconsole.log(selectCompletedTodos(state) === selectCompletedTodos(state)) \u002F\u002F=> false\n\nconsole.log(\n  memoizedSelectCompletedTodos(state) === memoizedSelectCompletedTodos(state)\n) \u002F\u002F=> true\n```\n\nAs you can see from the example above, `memoizedSelectCompletedTodos` does not run the second or third time, but we still get the same return value as last time.\n\nIn addition to skipping unnecessary recalculations, `memoizedSelectCompletedTodos` returns the existing result reference if there is no recalculation. This is important for libraries like [React-Redux] or [React] that often rely on reference equality checks to optimize UI updates.\n\n---\n\n## Terminology\n\n- \u003Ca name=\"selector-function\">\u003C\u002Fa>[**Selector Function**](#selector-function): A function that accepts one or more JavaScript values as arguments, and derives a result. When used with [Redux], the first argument is typically the entire Redux store state.\n- \u003Ca name=\"input-selectors\">\u003C\u002Fa>[**input selectors**](#input-selectors): Basic selector functions used as building blocks for creating a memoized selector. They are passed as the first argument(s) to [`createSelector`], and are called with all selector arguments. They are responsible for extracting and providing necessary values to the [result function].\n- \u003Ca name=\"output-selector\">\u003C\u002Fa>[**Output Selector**](#output-selector): The actual memoized selectors created by [`createSelector`].\n- \u003Ca name=\"result-function\">\u003C\u002Fa>[**Result Function**](#result-function): The function that comes after the [input selectors]. It takes the [input selectors]' return values as arguments and returns a result.\n- \u003Ca name=\"dependencies\">\u003C\u002Fa>[**`Dependencies`**](#dependencies): Same as [input selectors]. They are what the [output selector] \"depends\" on.\n\nThe below example serves as a visual aid:\n\n```ts\nconst outputSelector = createSelector(\n  [inputSelector1, inputSelector2, inputSelector3], \u002F\u002F synonymous with `dependencies`.\n  resultFunc \u002F\u002F Result function\n)\n```\n\n---\n\n## What's New in 5.0.0?\n\nVersion 5.0.0 introduces several new features and improvements:\n\n- **Customization Enhancements**:\n\n  - Added the ability to pass an options object to [`createSelectorCreator`], allowing for customized `memoize` and `argsMemoize` functions, alongside their respective options (`memoizeOptions` and `argsMemoizeOptions`).\n  - The [`createSelector`] function now supports direct customization of `memoize` and `argsMemoize` within its options object.\n\n- **Memoization Functions**:\n\n  - Introduced new experimental memoization functions: `weakMapMemoize` and `unstable_autotrackMemoize`.\n  - Incorporated `memoize` and `argsMemoize` into the [output selector fields] for debugging purposes.\n\n- **TypeScript Support and Performance**:\n\n  - Discontinued support for TypeScript versions below 4.7, aligning with modern TypeScript features.\n  - Significantly improved TypeScript performance for nesting [output selectors][output selector]. The nesting limit has increased from approximately 8 to around 30 [output selectors][output selector], greatly reducing the occurrence of the infamous `Type instantiation is excessively deep and possibly infinite` error.\n\n- **Selector API Enhancements**:\n\n  - Removed the second overload of `createStructuredSelector` due to its susceptibility to runtime errors.\n\n- **Additional Functionalities**:\n\n  - Added `dependencyRecomputations` and `resetDependencyRecomputations` to the [output selector fields]. These additions provide greater control and insight over [input selectors], complementing the new `argsMemoize` API.\n  - Introduced `inputStabilityCheck`, a development tool that runs the [input selectors] twice using the same arguments and triggers a warning If they return differing results for the same call.\n  - Introduced `identityFunctionCheck`, a development tool that checks to see if the [result function] returns its own input.\n\nThese updates aim to enhance flexibility, performance, and developer experience. For detailed usage and examples, refer to the updated documentation sections for each feature.\n\n- **Breaking Changes**:\n\n  - Removed `ParametricSelector` and `OutputParametricSelector` types. Their functionalities are now integrated into `Selector` and `OutputSelector` respectively, which inherently support additional parameters.\n\n\u003Cdiv align=\"right\">[ \u003Ca href=\"installation\">↑ Back to top ↑\u003C\u002Fa> ]\u003C\u002Fdiv>\n\n---\n\n## License\n\nMIT\n\n## References\n\n\u003Cdetails>\u003Csummary>\u003Cb>Click to Expand\u003C\u002Fb>\u003C\u002Fsummary>\n\nOriginally inspired by getters in [NuclearJS](https:\u002F\u002Fgithub.com\u002Foptimizely\u002Fnuclear-js.git), [subscriptions](https:\u002F\u002Fgithub.com\u002FDay8\u002Fre-frame#just-a-read-only-cursor) in [re-frame](https:\u002F\u002Fgithub.com\u002FDay8\u002Fre-frame) and this [proposal](https:\u002F\u002Fgithub.com\u002Freduxjs\u002Fredux\u002Fpull\u002F169) from [speedskater](https:\u002F\u002Fgithub.com\u002Fspeedskater).\n\n[typescript-badge]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-v4%2E7%2B-007ACC?style=for-the-badge&logo=TypeScript&logoColor=black&labelColor=blue&color=gray\n[build-badge]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002Freduxjs\u002Freselect\u002Fbuild-and-test-types.yml?branch=master&style=for-the-badge\n[build]: https:\u002F\u002Fgithub.com\u002Freduxjs\u002Freselect\u002Factions\u002Fworkflows\u002Fbuild-and-test-types.yml\n[npm-badge]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freselect.svg?style=for-the-badge\n[npm]: https:\u002F\u002Fwww.npmjs.org\u002Fpackage\u002Freselect\n[coveralls-badge]: https:\u002F\u002Fimg.shields.io\u002Fcoveralls\u002Freduxjs\u002Freselect\u002Fmaster.svg?style=for-the-badge\n[coveralls]: https:\u002F\u002Fcoveralls.io\u002Fgithub\u002Freduxjs\u002Freselect\n\n\u003C!-- External Links -->\n\n[Redux]: https:\u002F\u002Fredux.js.org 'Redux'\n[React]: https:\u002F\u002Freact.dev 'React'\n[React-Redux]: https:\u002F\u002Freact-redux.js.org 'React-Redux'\n\n\u003C!-- Internal Links -->\n\n[selector]: #selector-function 'Selector Function'\n[input selectors]: #input-selectors 'Input Selectors'\n[output selector]: #output-selector 'Output Selector'\n[result function]: #result-function 'Result Function'\n[output selector fields]: https:\u002F\u002Freselect.js.org\u002Fapi\u002FcreateSelector#output-selector-fields 'Output Selector Fields'\n[`createSelector`]: https:\u002F\u002Freselect.js.org\u002Fapi\u002FcreateSelector 'createSelector'\n[`createSelectorCreator`]: https:\u002F\u002Freselect.js.org\u002Fapi\u002FcreateSelectorCreator 'createSelectorCreator'\n[`lruMemoize`]: https:\u002F\u002Freselect.js.org\u002Fapi\u002FlruMemoize 'lruMemoize'\n[`weakMapMemoize`]: https:\u002F\u002Freselect.js.org\u002Fapi\u002FweakMapMemoize 'weakMapMemoize'\n[`createStructuredSelector`]: https:\u002F\u002Freselect.js.org\u002Fapi\u002FcreateStructuredSelector 'createStructuredSelector'\n\n\u003C\u002Fdetails>\n","Reselect 是一个用于创建记忆化选择器函数的库，通常与 Redux 一起使用，但也可以应用于任何普通的 JavaScript 不可变数据。其核心功能包括计算派生数据、提高选择器效率以及支持选择器组合。通过记忆化技术，只有当输入参数发生变化时，选择器才会重新计算结果，从而减少不必要的计算开销。此外，选择器可以作为其他选择器的输入，便于构建复杂的数据处理逻辑。Reselect 适用于需要从状态中高效提取或计算数据的应用场景，特别是在使用 Redux 进行状态管理时，能够帮助开发者优化性能并简化代码。","2026-06-11 02:56:03","top_language"]