{"id":15633395,"url":"https://github.com/janrywang/react-eva","last_synced_at":"2025-04-08T03:14:51.608Z","repository":{"id":51140647,"uuid":"161761646","full_name":"janryWang/react-eva","owner":"janryWang","description":"Effects+View+Actions(React distributed state management solution with rxjs.)","archived":false,"fork":false,"pushed_at":"2021-05-21T16:38:03.000Z","size":53,"stargazers_count":156,"open_issues_count":4,"forks_count":16,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-31T16:15:28.752Z","etag":null,"topics":["mobx","observable","react","reactive","redux","rxjs"],"latest_commit_sha":null,"homepage":"","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/janryWang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-14T09:25:18.000Z","updated_at":"2024-01-09T01:47:10.000Z","dependencies_parsed_at":"2022-09-05T02:41:24.979Z","dependency_job_id":null,"html_url":"https://github.com/janryWang/react-eva","commit_stats":null,"previous_names":["janrywang/react-xeffect"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janryWang%2Freact-eva","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janryWang%2Freact-eva/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janryWang%2Freact-eva/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janryWang%2Freact-eva/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/janryWang","download_url":"https://codeload.github.com/janryWang/react-eva/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767236,"owners_count":20992548,"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":["mobx","observable","react","reactive","redux","rxjs"],"created_at":"2024-10-03T10:48:57.984Z","updated_at":"2025-04-08T03:14:51.558Z","avatar_url":"https://github.com/janryWang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React EVA\n\n\u003e Effects+View+Actions(React distributed state management solution with rxjs.)\n\n### Background\n\nIn the long process of practice, we found that the one-way data flow management application state may not be a silver bullet.so we can change the way to make React faster.\n\n### Features\n- Learning easier\n- Smaller than redux\n- Faster than one-way data stream, Because when we manage the state distribution, the entire React tree will not be fully redrawn due to a state change.\n- More elegant than react ref\n- Safer than react ref, Because the traditional way to use the React Ref API is to make it easy for users to access private methods, which is not a problem with React EVA.\n- Support React Hooks\n\n### Already used products\n\n- [alibaba uform](https://github.com/alibaba/uform)\n\n### Install\n\n```\nnpm install --save react-eva\n```\n\n### Usage\nhttps://codesandbox.io/s/lr68qp453q\n```jsx\nimport React, { useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useEva, createAsyncActions, createEffects } from \"react-eva\";\n\nconst App = ({ actions, effects }) =\u003e {\n  const [state, setState] = useState({ text: \"default\" });\n  const { implementActions, dispatch } = useEva({ actions, effects });\n  implementActions({\n    getText: () =\u003e state.text,\n    setText: text =\u003e setState({ text })\n  });\n  return (\n    \u003cdiv className=\"sample\"\u003e\n      \u003cdiv className=\"text\"\u003e{state.text}\u003c/div\u003e\n      \u003cbutton className=\"inner-btn\" onClick={() =\u003e dispatch(\"onClick\")}\u003e\n        button\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst actions = createAsyncActions(\"getText\", \"setText\");\n\nconst effects = createEffects(async $ =\u003e {\n  console.log(await actions.getText());\n  $(\"onClick\").subscribe(() =\u003e {\n    actions.setText(\"hello world\");\n  });\n});\n\nReactDOM.render(\n  \u003cApp actions={actions} effects={effects} /\u003e,\n  document.getElementById(\"root\")\n);\n\n```\n\n\n### API\n\n\n##### 1. `useEva({actions:Object,effects:Function})`\n\nIt will return the following methods.\n\n| property name    | description                                                                                             | type     | params                                              |\n| ---------------- | ------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------- |\n| implementActions | it used for batch create state actions method,and it will communicate with externally declared actions. | Function | `implementAction(type : String,handler : Function)` |\n| dispatch         | It is used to dispatch custom events.                                                                   | Function | `dispatch(type:String,..args : any)`                |\n| subscription     | It is used to perform side-effect logic.If you set autoRun to false, then you need to call it manually. | Function | `subscription()`                                    |\n\n\n\n##### 2. `connect(options : Object | ReactComponent) : (Target : ReactComponent)=\u003eReactComponent`\n\nThe connect's options\n\n| property name | description                              | type    |\n| ------------- | ---------------------------------------- | ------- |\n| autoRun       | It is used to auto run the subscription. | Boolean |\n\nThe target component will receive the following properties.\n\n| property name    | description                                                                                             | type     | params                                              |\n| ---------------- | ------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------- |\n| implementActions | it used for batch create state actions method,and it will communicate with externally declared actions. | Function | `implementAction(type : String,handler : Function)` |\n| dispatch         | It is used to dispatch custom events.                                                                   | Function | `dispatch(type:String,..args : any)`                |\n| subscription     | It is used to perform side-effect logic.If you set autoRun to false, then you need to call it manually. | Function | `subscription()`                                    |\n| subscribes       | It is the core object of event communication.                                                           | Object   |                                                     |\n\nThe output component will receive the following properties.\n\n| property name | description                                                  | type     | params                                                       |\n| ------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |\n| actions       | This property is designed to internal and external communication of components. | Object   |                                                              |\n| effects       | This property is designed to handle the side effects of components. | Function | `effects(callback : ($ : (type : String, filter : Function)=\u003eObservable)=\u003e{})` |\n\n\n##### 3. `createActions(...type : String) : Object`\n\nIt is used for batch declaration of state actions.\n(Note: The success of calling actions is that the component has been rendered.)\n\n##### 4. `createAsyncActions(...type : String) : Object`\n\nIt is used for batch declaration of state actions.\n(Note: All methods will return a Promise object, and we don't have to wait for the component to render completed when we call actions.)\n\n##### 5. `mergeActions(...actions : Object) : Object`\n\nIt is used for merge multi actions.\n\n##### 6. `createEffects(callback : ($ : (type : String, filter : Function)=\u003eObservable)=\u003e{}) : Function`\n\nIt is used to create a side-effect execution environment.\n\n\n\n### LICENSE\n\nThe MIT License (MIT)\n\nCopyright (c) 2018 JanryWang\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanrywang%2Freact-eva","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjanrywang%2Freact-eva","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanrywang%2Freact-eva/lists"}