{"id":39462254,"url":"https://github.com/codeccoop/colmado","last_synced_at":"2026-01-18T04:45:18.321Z","repository":{"id":65550439,"uuid":"571224894","full_name":"codeccoop/colmado","owner":"codeccoop","description":"Uncomplicated store and minimal flux architecture implementation with react contexts","archived":false,"fork":false,"pushed_at":"2022-12-20T18:18:33.000Z","size":46,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-19T20:05:57.135Z","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":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeccoop.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}},"created_at":"2022-11-27T15:10:09.000Z","updated_at":"2022-11-28T16:33:05.000Z","dependencies_parsed_at":"2023-01-30T01:25:13.109Z","dependency_job_id":null,"html_url":"https://github.com/codeccoop/colmado","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/codeccoop/colmado","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeccoop%2Fcolmado","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeccoop%2Fcolmado/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeccoop%2Fcolmado/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeccoop%2Fcolmado/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeccoop","download_url":"https://codeload.github.com/codeccoop/colmado/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeccoop%2Fcolmado/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2026-01-18T04:45:17.790Z","updated_at":"2026-01-18T04:45:18.287Z","avatar_url":"https://github.com/codeccoop.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Colmado](https://www.codeccoop.org/assets/images/colmado.png)\n\nColmado is an uncomplicated and minimal flux architecture implementation on top of [react contexts](https://reactjs.org/docs/context.html).\n\nIt proposes a singleton store with modules. Each module has a warehouse, where the data is stored, and a reducer, where actions are defineds. Colmado will create your store and dispatch your actions (change events) to the warehouses. **Yes, it's like redux, but home made**.\n\nInsted of a framework, it's an architectonic proposal with two helper functions: **createStore** and **useStore**. The source code is only 70 lines: easy to read, easy to understand, easy to hack.\n\n## Install\n\n`npm i --save colmado`\n\n## Code structure\n\nYou can use colmado in your own way –all together in a flat file or scattered throughout your components–, but to ensure scalability and modularity, we propose the following directory structure.\n\n```bash\n├── index.js # Your app root\n├── store # Store root directory\n│   ├── index.js # Your store instance\n│   ├── greetings # Store module. Open a new folder for each module\n│   │   ├── index.js # The module instance\n│   │   └── reducer.js # Optional, but if your reducer is getting bigger, you can place your actions in a separate file\n```\n\n## Usage\n\n### The store\n\nTo start with colmado, you have to create your store. Let's do it\n\n```javascript\nimport { createStore } from \"colmado\";\nconst Store = createStore();\n```\n\n### The store modules\n\nEasy! But your store is empty. So, lets create one module.\n\n```javascript\nconst myModule = {\n  name: \"names\",\n  Component: ({ Warehouse, children }) =\u003e {\n    const [state, setState] = useState();\n    return \u003cWarehouse value={[state, setState]}\u003e{children}\u003c/Warehouse\u003e;\n  },\n};\n\nconst storeModules = [myModule];\nconst Store = createStore(storeModules);\n```\n\nNow you have your **warehouse** where you can store your data, but nobody is dispatching orders.\n\n### Reducers\n\nThe store isolate your state from the rest of your application into its warehouses and only allows you to place orders to the **dispatcher**. To be able to dispatch orders, you have to define your **reducer**. So, let's go.\n\n```javascript\nconst myModule = {\n  name: \"names\",\n  Component: ({ Warehouse, children }) =\u003e {\n    const [state, setState] = useState(\"Garfield\");\n    return \u003cWarehouse value={[state, setState]}\u003e{children}\u003c/Warehouse\u003e;\n  },\n  reducer: ({ state, action, payload }) =\u003e {\n    switch (action) {\n      case \"SET_NAME\":\n        return payload;\n    }\n  },\n};\n```\n\n### Hook and dispatch\n\nAnd your colmado store is ready to open its doors. You only have to wrap your react components with the store and use the **useStore** hook to access the warehouse data and the dispatcher.\n\n```javascript\nimport { useStore } from \"colmado\";\nimport Store from \"./store\";\n\nfunction SayHelloTo() {\n  const [store, dispatch] = useStore();\n\n  function setName(ev) {\n    const value = ev.currentTarget.name;\n    dispatch({\n      action: \"SET_NAME\",\n      payload: value,\n    });\n  }\n\n  return (\n    \u003c\u003e\n      \u003cselect onChange={setName}\u003e\n        \u003coption value=\"Gargamel\"\u003eGargamel\u003c/option\u003e\n        \u003coption value=\"Suneo\"\u003eSuneo\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cp\u003eHello, {store.name}!\u003c/p\u003e\n    \u003c/\u003e\n  );\n}\n\nfunction App() {\n  return (\n    \u003cStore\u003e\n      \u003cSayHelloTo /\u003e\n    \u003c/Store\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeccoop%2Fcolmado","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeccoop%2Fcolmado","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeccoop%2Fcolmado/lists"}