{"id":13817348,"url":"https://github.com/UpperCod/kubox","last_synced_at":"2025-05-15T20:32:21.153Z","repository":{"id":113251217,"uuid":"130129380","full_name":"UpperCod/kubox","owner":"UpperCod","description":"Kubox, is a small (\u003c600bytes gzip) state manager, such as Redux, Mobx or another library. ","archived":false,"fork":false,"pushed_at":"2018-08-29T00:14:38.000Z","size":128,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-29T01:42:09.654Z","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":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UpperCod.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-04-18T22:34:39.000Z","updated_at":"2023-08-15T16:20:29.000Z","dependencies_parsed_at":"2023-03-09T02:30:19.690Z","dependency_job_id":null,"html_url":"https://github.com/UpperCod/kubox","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"970db140a7e2035c7c0777be360988eb59295ba1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fkubox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fkubox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fkubox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fkubox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UpperCod","download_url":"https://codeload.github.com/UpperCod/kubox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253341970,"owners_count":21893547,"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-04T06:00:40.709Z","updated_at":"2025-05-15T20:32:20.614Z","avatar_url":"https://github.com/UpperCod.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Kubox\n\nKubox, is a small (\u003c600bytes gzip) state manager, such as **Redux**, **Mobx** or another library.\n\nKubox manages the state based on **namespace**, these are created from an object of actions, Kubox maps this object and obtains **namespace** based on the properties that this object possesses, the The purpose of these **namespace** is to limit the scope of the actions only to the **namespace**.\n\n\n```js\nimport Store from \"kubox\";\n// The root state must always be an object.\nlet state = {countOne : 0, countTwo:0};\n// This function only knows the state scope assigned by kubox.\nlet add = (state) =\u003e state.set( state.get() + 1 );\n\nlet state = new Store(state,{\n   count : {\n       // The namespace of this action is countOne\n       one : {add},\n       // The namespace of this action is countTwo\n       two : {add}\n   }\n});\n/**\n* The action is stored in:\n* state.actions.\u003cnamespace\u003e.\u003caction\u003e\n*/\nstate.actions.countOne.add(); // {countOne: 1,countTwo: 0}\nstate.actions.countTwo.add(); // {countOne: 1,countTwo: 1}\n```\n \n\nIn the previous example it is taught as **Kubox**, it limits the depth of the state it receives from each existing action based on the **namespace**.\n\n\n## Namespace\n\nKubox manages the state based on **namespace**, an action will always receive by kubox as the first argument an object with 2 methods, these methods allow to interact with the state either by root or associated only to the context given by the **namespace**.\n\n* set: This method allows you to modify the status.\n* get: This method allows you to obtain the status.\n\n### Get\n\nThe use of `get` allows to obtain the current state\n\n```javascript\nexport function add(state){\n   state.get()\n}\n```\n\n\n### Set\n\nThe use of `set` allows you to generate a new state, if you want to go from a **A** state to a **B** state, just define the **B** state by using `set(B)`.\n\n```javascript\nexport function add(state){\n   state.set(\n           state.get() + 1\n   )\n}\n```\n\n\n\u003e The functions created with this argument format are highly reusable.\n\n\n### Arguments\n\nEvery action can receive more than one argument.\n\n```javascript\nexport function sum(state,a, b){\n   state.set(a+b)\n}\n\nstore.actions.total.sum(100,100) // {count:200}\n```\n\n\n## Subscribers\n\nAll the change of state is announced to the subscribers, for this you must use the method of the instance `store.subscribe`.\n\n```javascript\nimport Store from \"kubox\"\n\nlet store = new Store({})\n\nstore.subscribe((state)=\u003e{\n   console.log(state)\n})\n```\n\n\n### Directed subscription\n\nBy default the subscriber hears all the changes, but you can focus this listening to only the actions of a given **namespace**.\n\n```javascript\nstore.subscribe((state)=\u003e{\n   console.log(state)\n},\"count\")\n```\n\n\n\u003e The taught subscriber will only hear the changes associated with the actions that belong to the namespace **count**\n\n\n## Middleware\n\nAny action can be seen in the attempted modification by the middleware. This receives 2 arguments:\n\n1. state: {object}, this has the ** set ** and ** get ** methods.\n2. change: {object}, this has a detail of who tries to generate the change.\n   * space: {string}, alias for the ** space name **\n   * action: {string}, name of the action that executes the `set` method.\n   * state: {any}, argument given to the `set` method, for the state update.\n\n```javascript\nimport Store from \"kubox\"\nimport state from \"./state.js\";\nimport actions from \"./actions.js\";\n\nfunction middlewareLog(state,change){\n   console.log({\n       prev : state.get()\n   });\n   state.set({\n       ...state.get(),\n       [change.space] : change.state\n   })\n   console.log({\n       next : state.get()\n   });\n}\n\nlet store = new Store(state,actions)\n\nstore.subscribe((state)=\u003e{\n   console.log(state)\n})\n```\n\n\n\u003e The middleware has absolute control over the definition of the state.\n\n\n## Utilities\n\n|Libreria | Npm | Github |\n|:--------|:----|:-------|\n| kubox-preact | [Link](https://www.npmjs.com/package/kubox-preact) | [Link](https://github.com/UpperCod/kubox-preact) | \n| kubox-react | [Link](https://www.npmjs.com/package/kubox-react) | [Link](https://github.com/UpperCod/kubox-react) | \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUpperCod%2Fkubox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FUpperCod%2Fkubox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUpperCod%2Fkubox/lists"}