{"id":13394472,"url":"https://github.com/eloytoro/react-redux-uuid","last_synced_at":"2026-07-05T18:30:20.850Z","repository":{"id":57343367,"uuid":"73644660","full_name":"eloytoro/react-redux-uuid","owner":"eloytoro","description":null,"archived":false,"fork":false,"pushed_at":"2024-08-27T19:54:27.000Z","size":22,"stargazers_count":53,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-17T23:52:21.284Z","etag":null,"topics":["react","react-redux","redux","uuid"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eloytoro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-13T21:38:50.000Z","updated_at":"2022-10-11T11:13:47.000Z","dependencies_parsed_at":"2025-02-17T06:09:36.024Z","dependency_job_id":"e3b92d3b-f930-4897-a576-705db88866d3","html_url":"https://github.com/eloytoro/react-redux-uuid","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloytoro%2Freact-redux-uuid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloytoro%2Freact-redux-uuid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloytoro%2Freact-redux-uuid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloytoro%2Freact-redux-uuid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eloytoro","download_url":"https://codeload.github.com/eloytoro/react-redux-uuid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240434308,"owners_count":19800550,"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":["react","react-redux","redux","uuid"],"created_at":"2024-07-30T17:01:20.837Z","updated_at":"2026-07-05T18:30:20.810Z","avatar_url":"https://github.com/eloytoro.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/eloytoro/react-redux-uuid.svg?branch=master)](https://travis-ci.org/eloytoro/react-redux-uuid)\n[![npm version](https://badge.fury.io/js/react-redux-uuid.svg)](https://badge.fury.io/js/react-redux-uuid)\n\n## react-redux-uuid\n\nA place to keep your disposable but application-related component state data\n\n### Why would you need this\n\nSometimes you write components that hold a state with data related to your application's data, in an\nideal world you would like to keep all of your's app state in the redux state, but sometimes these\ncomponents dont have an unique key in the redux state because there's an undefined number of instances\nof your component across the app.\n\n### Philosophy\n\nThe main goal is to register a unique sub-state for each component that needs it into the redux state,\nthis happens when the component mounts/unmounts.\n\nThe data in this state, very much like the data in the component's local state, isn't persistent and\nis completely discarded in the unmount lifecycle.\n\nInstead of initializing your component's state in its constructor you would do as you would with a\nredux reducer declaring its initial state in the reducer's definition.\n\n### Quick Example\n\n```jsx\n// declaration of your Autocomplete.js component\n\nconst Autocomplete = ({ options }) =\u003e (\n  ...\n)\n\nconst mapStateToProps = (state /* this is the componet's unique state */) =\u003e {\n  return {\n    options: state.options\n  }\n}\n\nexport default connectUUID('autocomplete', mapStateToProps)(Autocomplete);\n\n// using it somewhere else\n\n\u003cdiv\u003e\n  \u003cAutocomplete /\u003e\n  \u003cAutocomplete /\u003e\n  \u003cAutocomplete /\u003e\n\u003c/div\u003e\n\n// each of the Autocomplete components opens up a new key in your app's state\n\nuuid: {\n  autocomplete: {\n    // autogenerated uuids by this lib\n    'bc1de127-0962-43a6-a224-9cc4716da4b6': {...},\n    'cc94ccb8-85a3-407a-9fc0-cc895459b422': {...},\n    '41952137-e54c-4f9e-be08-07ffe11ee554': {...}\n  }\n}\n```\n\n## API\n\n### `createUUIDReducer(reducers)`\n\nCreates your UUID reducer, make sure to place its result state under `state.uuid`\n\n#### Arguments\n\n* `reducers` (_Object\\\u003ckey, reducer\\\u003e_): An object map of reducers, where each `\u003ckey\u003e` sets the\nreducer's *name* (see `connectUUID(name, ...args)`)\n\n#### Returns\n\nA reducer that will filter out redux actions that go through it to the corresponding reducer\n\n#### Example\n\n```js\nconst mainAppReducer = combineReducers({\n  uuid: createUUIDReducer({\n    counter: counterReducer,\n    fizzbuzz: fizzbuzzReducer\n  })\n})\n```\n\n### `connectUUID(name, [mapStateToProps], [mapDispatchToProps])`\n\nCreates a HoC to connect your component to it's corresponding reducer state, its very similar to\nreact-redux's `connect`. It will inject the `uuid` prop to the component as well.\n\n* `this.props.uuid` (_String_): The component's uuid\n\n#### Arguments\n\n* `name` (_String_): The name of the corresponding reducer that this HoC will use from the reducer\nobject map passed on to `createUUIDReducer` in the main reducer declaration\n* `[mapStateToProps]`: See [react-redux's docs](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)\n* `[mapDispatchToProps]`: See [react-redux's docs](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)\n\n#### Returns\n\nA higher-order React component that injects the inner state and wrapped action creators into your\ncomponent.\n\n**IMPORTANT NOTE:** if a component connected this way is provided an `uuid` prop then the component\nwont automatically generate its own UUID and it wont unregister the UUID when unmounted, this can be\n_extremely_ useful when dealing with UUID states that are handled manually, see the examples in the\nrepo to understand how this works\n\n### `wrapActionCreators(actionCreator, name, [uuid])`\n\nWraps calls to the given action creator, making it so it only applies to reducers within the given\n`name`, if the `uuid` parameter is passed then it will only apply to the only reducer matching the\nuuid (most times you wont need this).\n\n#### Arguments\n\n* `actionCreator` (_Function|Object_): The action creator to be wrapped, if an object of actions is\npassed it will wrap all the actions within instead.\n* `name` (_String_): The name of the reducer that actions will apply to\n* `[uuid]` (_String_): The name of the uuid of the reducer that the action will apply to, you wont\nneed to use this parameter this most of the time.\n\n#### Returns\n\nA new action (or object of actions) that will do the same as the action before but it will only\napply to reducers that match the criteria.\n\n### `registerUUID(name, uuid)`\n\nAn action creator for creating new sub-states into the given collection, useful when you wish to\nindex objects using a custom key\n\n#### Arguments\n\n* `name` (_String_): The name of the collection you wish to register a new sub-state in\n* `uuid` (_String|Object\u003cString, Any\u003e_): The UUID that matches the new sub-state, can also be an\nobject where the keys are the new UUIDs and the values are the initial states for them\n\n#### Returns\n\nThe action that once dispatched to the state would commit the change\n\n### `unregisterUUID(name, uuid)`\n\nAn action creator for removing the sub-states into from given collection\n\n#### Arguments\n\n* `name` (_String_): The name of the collection that contains the uuid\n* `uuid` (_String|Array\\\u003cString\\\u003e_): The UUID that matches the sub-state, can also be an array for\nbatch updates\n\n#### Returns\n\nThe action that once dispatched to the state would commit the change\n\n### `getUUIDState(state, name, uuid)`\n\nA helper for selecting a specific sub-state\n\n#### Arguments\n\n* `state` (_Object_): The whole redux state\n* `name` (_String_): The name of the collection of sub-states\n* `uuid` (_String_): The uuid you're looking for\n\n#### Returns\n\nThe sub-state corresponding the query\n\n### `getRegisteredUUIDs(state, name)`\n\nA helper for selecting an array of all the available keys in a collection\n\n#### Arguments\n\n* `state` (_Object_): The whole redux state\n* `name` (_String_): The name of the collection of sub-states\n\n#### Returns\n\nAn array of UUIDs that are currently registered into the collection\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feloytoro%2Freact-redux-uuid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feloytoro%2Freact-redux-uuid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feloytoro%2Freact-redux-uuid/lists"}