{"id":20409097,"url":"https://github.com/tcorral/redux-hub","last_synced_at":"2026-01-30T02:03:10.970Z","repository":{"id":57350848,"uuid":"165202212","full_name":"tcorral/redux-hub","owner":"tcorral","description":"Use this library to create redux state nodes so you can plug-in as many as you want behaving as if they were a single one.","archived":false,"fork":false,"pushed_at":"2024-11-25T07:06:15.000Z","size":96,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T18:02:54.038Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/tcorral.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-11T07:51:21.000Z","updated_at":"2024-09-05T14:16:18.000Z","dependencies_parsed_at":"2022-09-16T21:12:13.712Z","dependency_job_id":null,"html_url":"https://github.com/tcorral/redux-hub","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fredux-hub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fredux-hub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fredux-hub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fredux-hub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tcorral","download_url":"https://codeload.github.com/tcorral/redux-hub/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590852,"owners_count":21129902,"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-11-15T05:39:35.305Z","updated_at":"2026-01-30T02:03:05.949Z","avatar_url":"https://github.com/tcorral.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReduxHub\n\nUse this library to create redux state nodes so you can plug-in as many as you want behaving as if they were a single one.\n\n[![Build Status](https://travis-ci.org/tcorral/redux-hub.svg?branch=master)](https://travis-ci.org/tcorral/redux-hub)\n[![NPM Version](https://badge.fury.io/js/redux-hub.svg)](http://badge.fury.io/js/redux-hub)\n[![Chat on Gitter](https://badges.gitter.im/tcorral/redux-hub.svg)](https://gitter.im/tcorral/redux-hub?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n## Installation\n\nReduxHub is available as an NPM package. You can install ReduxHub\nin your project's directory as usual:\n\n```bash\n$ npm install redux-hub --save\n```\n\n## Usage\n\n### ReduxHub\n-------\n### StateHub class api\nReduxHub provides you with a class to instanciate your hub node.\n\u003e StateHub is a [Generic class](https://www.typescriptlang.org/docs/handbook/generics.html) and can be configured in advance so [TypeScript](https://www.typescriptlang.org) can provide the right information.\n\n#### Generics\nOn creating an instance of StateHub you need to provide the following Generics:\n\n1. State - Provide your state interface.\n2. Dispatchers - Provide your dispatchers interface.\n3. HubModel - Provide the Hub model interface.\n4. Result - Empty object where the node builder will store the used methods.\n\n```typescript\nimport { StateHub } from 'redux-hub';\n\nconst stateHub = new StateHub\u003cState, Dispatchers, Hub, {}\u003e();\n```\n-------\n### StateHub instance api\nOnce you have created the instance you will be provided with one method to setting up your hub node.\n\n#### node\nNode method gets only one argument, the scope name for your hub node.\n\n```typescript\nimport { StateHub } from 'redux-hub';\n\nconst stateHub = new StateHub\u003cState, Dispatchers, Hub, {}\u003e();\n\nconst node = stateHub.node('scope-name');\n```\n-------\n### Node builder api\nOnce we have set the node the api will provide two methods, one to set configuration and another\none to create the state node.\n\n#### set\nThis method receives two arguments, the first is the name of the property to set up and the second is the object to configure it.\n\n\u003e The name of the properties that can be configured are **actions**, **reducers** and **state**.\n\n**Actions and reducers are mandatory**\n\n**State is optional if the initial state is an empty object**\n\n```typescript\nimport { StateHub } from 'redux-hub';\n\nconst stateHub = new StateHub\u003cState, Dispatchers, Hub, {}\u003e();\n\nstateHub\n    .node('scope-name')\n    .set('actions', {})\n    .set('reducers', {})\n    .set('state', {});\n```\n\n#### create\nThis method, once you have configured the state node, can be used to get the state node instance.\n\n\u003e Creating a node without configuring actions and reducers first will throw an error.\n\n```typescript\nimport { StateHub } from 'redux-hub';\n\nconst stateHub = new StateHub\u003cState, Dispatchers, Hub, {}\u003e();\n\nconst stateNode = stateHub\n                    .node('scope-name')\n                    .set('actions', {})\n                    .set('reducers', {})\n                    .set('state', {}) // In this case this line could be skipped.\n                    .create();\n```\n\n-------\n### ReduxHub Node API\n\n#### dispatchers\nThis object wraps the action creators and dispatches the action on executing it.\n\n```javascript\nnode.dispatchers.test();\n```\n\n#### getState\nThis method returns node state.\n\n```javascript\nnode.getState();\n```\n\n#### createSubscriber\nThis method creates a subscriber to changes in state.\n\n##### Subscriber Configuration Examples\n\n**Listening to any change in global state**\nIf you don't pass any configuration object to the subscriber it will listening to any state change and the listener function will be executed.\n\n```javascript\nconst subscriber = node.createSubscriber();\nsubscriber(listener);\n```\n\n**Listening to any change in ReduxHub Node state**\nIf you want to react to all the changes in your ReduxHub Node state you have to pass a function that will return the state.\n\n\u003e The listener function will be executed only if the state changed since last time it was executed.\n\n```javascript\nconst subscriber = node.createSubscriber({\n    stateSelector: (state) =\u003e state\n});\nsubscriber(listener);\n```\n\n**Listening to an specific change in ReduxHub Node state**\nIf you want to react to an specific change in your state you have to pass a function that will return the state you want to check.\n\n\u003e The listener function will be executed only if the specific state changed since last time it was executed.\n\n```javascript\nconst subscriber = node.createSubscriber({\n    stateSelector: (state) =\u003e state.test\n});\nsubscriber(listener);\n```\n\n**Executing some code before executing the listener function**\nIf you need to execute some code before executing the listener function you can provide this function.\n\nThis function receives an object with the previous state and the current state.\n\n\u003e The function will be only executed if the previous state and the current one are different.\n\n\u003e If a function is provided as a handler property, the listener must be executed from inside of this function.\n\n```javascript\nconst subscriber = node.createSubscriber({\n    handler: (stateHolder, listener) =\u003e {\n        console.log(state.previous);\n        console.log(state.current);\n        listener();\n    }\n});\nsubscriber(listener);\n```\n\n\u003eYou can also combine both methods to execute the handler only when an specific state has changed.\n\n## API documentation\nAPI Documentation can be generated executing ```npm run docs```.\nThe documentation generated can be found inside the **docs** folder.\n\n## Build the source\nThis library has been written using [TypeScript](http://typescriptlang.org).\nIf you need to use it in your project but you are not working with TypeScript you can always to build the code using ```npm run build``` This command will *lint your code*, *run the tests* and *compile to TypeScript.\n\n## Contributing\n\nThis project is maintained by a community of developers. Contributions are welcome and appreciated.\nYou can find ReduxHub on GitHub; feel free to start an issue or create a pull requests:\u003cbr\u003e\n[https://github.com/tcorral/redux-hub](https://github.com/tcorral/redux-hub)\n\nFor more information, read the [contribution guide](https://github.com/tcorral/redux-hub/blob/master/CONTRIBUTING.md).\n\n## License\n\nCopyright (c) 2019 [Tomas Corral](http://github.com/tcorral).\u003cbr\u003e\nCopyright (c) 2019 [ReduxHub Contributors](https://github.com/tcorral/redux-hub/graphs/contributors).\u003cbr\u003e\nLicensed under the MIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftcorral%2Fredux-hub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftcorral%2Fredux-hub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftcorral%2Fredux-hub/lists"}