{"id":13725721,"url":"https://github.com/josepot/redux-views","last_synced_at":"2025-08-20T18:32:27.740Z","repository":{"id":34242254,"uuid":"173008372","full_name":"josepot/redux-views","owner":"josepot","description":"Like Reselect but with better support for shared-selectors","archived":false,"fork":false,"pushed_at":"2023-03-04T05:34:37.000Z","size":1692,"stargazers_count":74,"open_issues_count":8,"forks_count":4,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-08T17:50:15.829Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/josepot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-02-27T23:49:24.000Z","updated_at":"2024-06-03T20:27:49.000Z","dependencies_parsed_at":"2023-01-15T05:34:25.520Z","dependency_job_id":null,"html_url":"https://github.com/josepot/redux-views","commit_stats":{"total_commits":69,"total_committers":6,"mean_commits":11.5,"dds":"0.30434782608695654","last_synced_commit":"e68247b998df625251692e274682a36492deeea2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josepot%2Fredux-views","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josepot%2Fredux-views/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josepot%2Fredux-views/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josepot%2Fredux-views/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josepot","download_url":"https://codeload.github.com/josepot/redux-views/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230445926,"owners_count":18227060,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:02:32.596Z","updated_at":"2024-12-19T14:06:55.012Z","avatar_url":"https://github.com/josepot.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# redux-views\n\nSelector library designed for state management libraries (like Redux), with built-in support for shared selectors.\n\n## Installation\n\n```sh\nnpm install --save redux-views\n```\n\n## Simple usage\n\nSelectors are functions that compute derived data given a state, allowing that state to contain less redundant data.\n\n```js\nimport { createSelector } from 'redux-views';\n\nconst getAllCars = state =\u003e state.cars;\n\nconst getRunningCars = createSelector(\n  [getAllCars],\n  cars =\u003e cars.filter(car =\u003e car.isRunning)\n);\n```\n\nAll selectors created by redux-views are memoized: This means that if you call a selector multiple times with the same state and parameters, you'll always get the same result, without running the computation again.\n\n```js\nconst activeCars1 = getRunningCars(myState);\nconst activeCars2 = getRunningCars(myState);\n\nassert(activeCars1 === activeCars2);\nassert(getRunningCars.recomputations() === 1);\n```\n\n## Parametric selectors\n\nSometimes we need to build selectors that take parameters, usually to identify a specific instance. Consider the following selector which returns the passengers of a specific car:\n\n```js\nconst getRunningCarPassengers = (state, props) =\u003e {\n  const { carId } = props;\n\n  const runningCars = getRunningCars(state);\n  const passengers = getPassengers(state);\n\n  const car = runningCars\n    .find(car =\u003e car.id === carId);\n\n  return car.passengerIds\n    .map(id =\u003e passengers[id]);\n}\n\nconst passengersCar1_0 = getRunningCarPassengers(state, { carId: 1 });\nconst passengersCar2 = getRunningCarPassengers(state, { carId: 2 });\nconst passengersCar1_1 = getRunningCarPassengers(state, { carId: 1 });\n\nassert(passengersCar1_0 !== passengersCar1_1);\n// getRunningCarPassengers recomputed 3 times\n```\n\nAs you can imagine, the `getRunningCarPassengers` function is not memoized and it will re-evaluate every time that it's called.\n\nWith `redux-views` we can create instance selectors like this one, which will be automatically memoized. It just needs to know which parameters does it depend on. For this reason, we can create an id selector:\n\n```js\nimport { createIdSelector } from 'redux-views';\n\nconst getCarIdProp = createIdSelector(props =\u003e props.carId);\nconst getRunningCar = createSelector(\n  [\n    getRunningCars,\n    getCarIdProp\n  ],\n  (cars, carId) =\u003e cars.find(car =\u003e car.id === carId)\n);\nconst getRunningCarPassengers = createSelector(\n  [\n    getRunningCar,\n    getPassengers\n  ],\n  (car, passengers) =\u003e car.passengerIds.map(id =\u003e passengers[id])\n);\n\nconst passengersCar1_0 = getRunningCarPassengers(state, { carId: 1 }); // computes\nconst passengersCar2 = getRunningCarPassengers(state, { carId: 2 }); // computes\nconst passengersCar1_1 = getRunningCarPassengers(state, { carId: 1 }); // cached\n\nassert(passengersCar1_0 === passengersCar1_1);\nassert(getRunningCar.recomputations() === 2);\n```\n\nThis way, `redux-views` knows that `getRunningCarPassengers` will probably give different results for each `carId`, effectively allowing it to memoize the value for each one.\n\nIt's good to know that, by default, `redux-views` will keep those memoized values for as long as the application runs. However, it provides two ways of clearing the cache, either manually or with a ref count which automatically clears the cache when the selector is not used anymore. This is something internal and rarely used for individual projects, as it's meant for bindings with state management libraries.\n\nIf you're using a binding that supports ref count, you most likely don't need to worry about invalidating the cache.\n\n## Migrating from reselect@4.0\n\nThis version of `redux-views` removes the variadic overload of `createSelector` from `reselect@4.0`, which means that all calls that were using this overload will need to be changed. For example:\n\n```js\ncreateSelector(\n  getRunningCars,\n  getPassengers,\n  (cars, passengers) =\u003e ...\n);\n```\n\nbecomes\n\n```js\ncreateSelector(\n  [\n    getRunningCars,\n    getPassengers,\n  ],\n  (cars, passengers) =\u003e ...\n);\n```\n\nThat's the only breaking change for the simple usage. `redux-views` passes all the tests from `reselect@4.0`. There's a codemod in the works that will allow to replace all of these automatically.\n\nNow, to make use of the built-in memoization in parametric selectors it will need extra work, but basically you'll need to find all of the selectors that use props, and replace them with a `createIdSelector`. Possible examples:\n\n```js\ncreateSelector(\n  getRunningCars,\n  (_, props) =\u003e props.carId,\n  (cars, carId) =\u003e cars[props.carId]\n);\n```\n\nbecomes\n\n```js\nconst getCarIdProp = createIdSelector(props =\u003e props.carId);\n\ncreateSelector(\n  getRunningCars,\n  getCarIdProp,\n  (cars, carId) =\u003e cars[props.carId]\n);\n```\n\nThis will allow you to get rid of all selector creators (`reselect@4.0`'s solution for memoizing shared parametric selectors)\n\n## Migrating from re-reselect\n\n`re-reselect` has a very similar concept to `redux-views`, but you had to define a \"keySelector\" for every parametric selector you needed. So grabbing the example from their doc:\n\n```js\nconst getUsers = state =\u003e state.users;\nconst getLibraryId = (state, libraryName) =\u003e state.libraries[libraryName].id;\n\nconst getUsersByLibrary = createCachedSelector(\n  // inputSelectors\n  getUsers,\n  getLibraryId,\n\n  // resultFunc\n  (users, libraryId) =\u003e expensiveComputation(users, libraryId),\n)(\n  // re-reselect keySelector (receives selectors' arguments)\n  // Use \"libraryName\" as cacheKey\n  (_state_, libraryName) =\u003e libraryName\n);\n```\n\nNow becomes\n\n```js\nconst getUsers = state =\u003e state.users;\nconst getLibraryName = createIdSelector(libraryName =\u003e libraryName);\nconst getLibraryId = createSelector(\n  [\n    state =\u003e state.libraries,\n    getLibraryName,\n  ],\n  (libraries, libraryName) =\u003e libraries[libraryName].id\n);\n\nconst getUsersByLibrary = createSelector(\n  [\n    getUsers,\n    getLibraryId,\n  ],\n  (users, libraryId) =\u003e expensiveComputation(users, libraryId),\n);\n```\n\nAnd we don't need to define any keySelector for every other selector we want to create that hangs from this one.\n\n## API\n\n### createSelector\n\n```ts\nfunction createSelector\u003cT, R\u003e(\n  selectors: Array\u003cSelector\u003cR\u003e\u003e,\n  combiner: (...res: Array\u003cR\u003e) =\u003e T,\n  equalityFn?: (a: T, b: T) =\u003e boolean\n): Selector\u003cT\u003e;\n```\n\nCreates a new selector by combining other selectors. Parameters:\n\n* selectors: List of input selectors\n* combiner: Computing function. Receives through arguments the result of the input selectors (in the same order as they are defined)\n* equalityFn: Optional function that checks whether two values returned by `combiner` are equal. Defaults to strict equality (`===`).\n\n### createIdSelector\n\n```ts\nfunction createIdSelector(\n  idSelector: (...props: Array) =\u003e string\n): Selector\u003cstring\u003e;\n```\n\nCreates a selector from props. Parameters:\n\n* idSelector: Function that should return a string representing the id.\n\n### createStructuredSelector\n\n```ts\nexport function createStructuredSelector\u003cT\u003e(\n  selectors: Dictionary\u003cSelector\u003cT\u003e\u003e\n): Selector\u003cDictionary\u003cT\u003e\u003e\n```\n\nConvenience function that creates a selector by combining them in an object. Example:\n\n```ts\nconst getDataA = createSelector(...);\nconst getDataB = createSelector(...);\n\ncreateStructuredSelector({\n  a: getDataA,\n  b: getDataB\n});\n\n// Is the same as\n\ncreateSelector(\n  [\n    getDataA,\n    getDataB\n  ],\n  (a, b) =\u003e ({\n    a,\n    b\n  }),\n  shallowCompare\n);\n```\n\n## Internal API\n\n\u003e This API is only meant when building bindings of this library for state management ones (like Redux), for internal testing, or for low-level access to the internal cache. Normal usage of this library in individual projects shouldn't need any of these.\n\nEvery selector created by `redux-views` has the following properties:\n\n* recomputations: Function that returns the number of computations performed by this selector.\n* resetRecomputations: Function that clears the number of computations.\n* dependencies: Original list of dependencies.\n* resultFunc: Original combiner function.\n\nAdditionally, those selectors that have a selector created by `createIdSelector` in their dependency chain, will have:\n\n* idSelector: Function that returns the id for an instance.\n* use: Function that adds a usage to the ref count for a given instance.\n* clearCache: Function that immediately clears the cache.\n\nThe most important function is `use`. It has the following signature:\n\n```ts\nfunction use(\n  id: string\n): () =\u003e void;\n```\n\nWhat this function does is mark that the value computed for the instance `id` is in use through a ref count.\n\nThe function returned by `use` is the clean-up function, and when the ref count reaches 0, the value whose idSelector returns that `id` is removed from the cache.\n\nTypically, for every instance of a component, you want to grab the `id` of that instance by using the `idSelector` function and call `use` with it. Then, every time that `id` changes, call the clean-up function and call `use` again with the new id.\n\nThis API makes is very easy to integrate with React. For instance, we could easily create a hook like `usePropsSelector` that uses the `useSelector` hook from `react-redux`: \n\n```js\nconst usePropsSelector = (selector, props) =\u003e {\n  const id = selector.idSelector \u0026\u0026 selector.idSelector(null, props);\n  useEffect(() =\u003e selector.use \u0026\u0026 selector.use(id), [selector, id]);\n\n  return useSelector(x =\u003e selector(x, props));\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosepot%2Fredux-views","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosepot%2Fredux-views","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosepot%2Fredux-views/lists"}