{"id":18296229,"url":"https://github.com/ruanyl/reapex","last_synced_at":"2025-07-05T16:39:30.544Z","repository":{"id":32714506,"uuid":"131761538","full_name":"ruanyl/reapex","owner":"ruanyl","description":"Intuitive state management and data flow orchestration","archived":false,"fork":false,"pushed_at":"2023-08-03T06:37:18.000Z","size":1977,"stargazers_count":58,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-14T05:19:10.297Z","etag":null,"topics":["data-flow","react","state-management","typescript","vue"],"latest_commit_sha":null,"homepage":"https://reapex.gitbook.io/docs","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/ruanyl.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-01T20:47:53.000Z","updated_at":"2023-12-10T05:51:35.000Z","dependencies_parsed_at":"2024-06-18T21:14:30.184Z","dependency_job_id":"026a7ceb-dd08-41d8-a742-f996daa7880b","html_url":"https://github.com/ruanyl/reapex","commit_stats":{"total_commits":305,"total_committers":4,"mean_commits":76.25,"dds":0.2786885245901639,"last_synced_commit":"05d269539d5bd91d28ac943831105401f59c67da"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruanyl%2Freapex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruanyl%2Freapex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruanyl%2Freapex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruanyl%2Freapex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruanyl","download_url":"https://codeload.github.com/ruanyl/reapex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339019,"owners_count":20923003,"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":["data-flow","react","state-management","typescript","vue"],"created_at":"2024-11-05T14:39:56.388Z","updated_at":"2025-04-05T12:31:50.467Z","avatar_url":"https://github.com/ruanyl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reapex \n[![travis-ci](https://travis-ci.org/ruanyl/reapex.svg?branch=master)](https://travis-ci.org/github/ruanyl/reapex)\n![github-workflow](https://github.com/ruanyl/reapex/workflows/CI/badge.svg)\n[![npm](https://img.shields.io/npm/v/reapex.svg)](https://www.npmjs.com/package/reapex)\n[![issues](https://img.shields.io/github/issues/ruanyl/reapex)](https://github.com/ruanyl/reapex/issues)\n[![license](https://img.shields.io/github/license/ruanyl/reapex)](https://github.com/ruanyl/reapex/blob/master/LICENSE.md)\n\n\nIntuitive state management and data flow orchestration library which provides seamless development experience for React and Vue application.\n\n\n#### [Documentation](https://reapex.gitbook.io/docs/)\n\n## Examples\n\n### Run example\nExamples are under `examples` folder.\n\n```\nyarn example:counter\nyarn example:vue-counter\n```\nOr check out live examples:\n\n1. [Counter](https://codesandbox.io/s/reapex-example-counter-oluew)\n2. [Todo List](https://codesandbox.io/s/todo-list-examle-reapex-2n4qc?file=/src/index.tsx)\n3. [Login Form](https://codesandbox.io/s/reapex-login-form-06eq1)\n4. [Vue Counter](https://codesandbox.io/s/vue-counter-jgb5u?file=/src/main.ts)\n\n## Getting started with a simple React `Counter` example\n\n```\nnpm i reapex reapex-react --save\n```\n\n### Example\n```typescript\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { App } from 'reapex'\nimport { useModel } from 'reapex-react'\n\nconst app = new App()\n\n// Create a model(state)\nconst CounterModel = app.model('Counter', 0)\n\n// Define the mutations: how you want the state to be mutated\nconst [mutations] = CounterModel.mutations({\n  increase: () =\u003e total =\u003e total + 1,\n  decrease: () =\u003e total =\u003e total - 1,\n})\n\n// useModel in the component\nexport const Counter = () =\u003e {\n  const total = useModel(CounterModel)\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={mutations.decrease}\u003e-\u003c/button\u003e\n      {total}\n      \u003cbutton onClick={mutations.increase}\u003e+\u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n\n// Render it!\nrender(\u003cCounter /\u003e, document.getElementById('root'))\n```\n\n\n## Integrate with immerjs\n```typescript\nimport immerPlugin from 'reapex-plugin-immer'\n\napp.plugin(immerPlugin)\n\nconst CounterModel = app.model('Counter', { total: 0 })\nconst [mutations] = counter.mutations({\n  increase: () =\u003e s =\u003e {\n    s.total = s.total + 1\n    return s\n  },\n  decrease: () =\u003e s =\u003e {\n    s.total = s.total - 1\n    return s\n  },\n})\n```\nCheckout [reapex-plugin-immer](https://github.com/ReapexJS/reapex-plugin-immer)\n\n## Work with Local Storage\n\n```typescript\nimport { App } from 'reapex'\nimport createLocalStoragePlugin from 'reapex-plugin-local-storage'\n\n// 1. Initialize the plugin\nconst { plugin, persist } = createLocalStoragePlugin()\nconst app = new App()\n\n// 2. register the plugin\napp.plugin(plugin)\n\n// 3. Simply wrap a `model` with `persist`\nconst UserModel = app.model('User', { name: '', age: 0 })\npersist(UserModel)\n```\n\nCheckout [reapex-plugin-local-storage](https://github.com/ruanyl/reapex/blob/master/packages/reapex-plugin-local-storage/README.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruanyl%2Freapex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruanyl%2Freapex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruanyl%2Freapex/lists"}