{"id":13511357,"url":"https://github.com/pedronauck/reworm","last_synced_at":"2025-05-15T18:02:07.377Z","repository":{"id":44599076,"uuid":"145173609","full_name":"pedronauck/reworm","owner":"pedronauck","description":"🍫 the simplest way to manage state","archived":false,"fork":false,"pushed_at":"2023-01-04T21:41:20.000Z","size":2198,"stargazers_count":1465,"open_issues_count":18,"forks_count":26,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-07T22:09:43.928Z","etag":null,"topics":["react","react-context","redux","state","state-management"],"latest_commit_sha":null,"homepage":"","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/pedronauck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-17T23:04:48.000Z","updated_at":"2025-02-17T23:49:43.000Z","dependencies_parsed_at":"2023-02-02T21:01:06.273Z","dependency_job_id":null,"html_url":"https://github.com/pedronauck/reworm","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freworm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freworm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freworm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freworm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pedronauck","download_url":"https://codeload.github.com/pedronauck/reworm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253785007,"owners_count":21963901,"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":["react","react-context","redux","state","state-management"],"created_at":"2024-08-01T03:00:48.193Z","updated_at":"2025-05-15T18:02:07.337Z","avatar_url":"https://github.com/pedronauck.png","language":"TypeScript","funding_links":[],"categories":["react","TypeScript","目录","List","🌐 Web Development - Frontend"],"sub_categories":[],"readme":"\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cdn-std.dprcdn.net/files/acc_649651/z2M2Am\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://badgen.net/npm/v/reworm\" /\u003e\n  \u003cimg src=\"https://badgen.net/travis/pedronauck/reworm\" /\u003e\n  \u003cimg src=\"https://badgen.net/badge/license/MIT/blue\" /\u003e\n\u003c/p\u003e\n\n## 🧐 \u0026nbsp; Why?\n\nForget about actions, connections, reducers and a lot of boilerplate to create and manage states. With reworm you can create and manage state as simple as on the image above.\n\n### [Todo List Example](https://codesandbox.io/s/405lzj6m84)\n\n## 💻 \u0026nbsp; Install and Usage\n\nInstall reworm using your package manager\n\n```bash\n$ yarn add reworm\n```\n\nThen just wrap your app with our `Provider`, create your new state and use it!\n\n```jsx\nimport React from 'react'\nimport { Provider, create } from 'reworm'\n\nconst { get } = create('userStore', { name: 'John' })\n\nconst App = () =\u003e (\n  \u003cProvider\u003e\n    \u003cdiv\u003e{get(s =\u003e s.name)}\u003c/div\u003e\n  \u003c/Provider\u003e\n)\n```\n\n### Change your state easily\n\nInstead of defining actions or something else to change your state, with reworm you just need to use the `set` method like that:\n\n```js\nimport React from 'react'\nimport { Provider, create } from 'reworm'\n\nconst { set, get } = create('userStore', { name: 'John' })\n\nclass App extends React.Component {\n  componentDidMount() {\n    set(prev =\u003e ({ name: 'Peter' + prev.name }))\n  }\n  render() {\n    return (\n      \u003cProvider\u003e\n        \u003cdiv\u003e{get(s =\u003e s.name)}\u003c/div\u003e\n      \u003c/Provider\u003e\n    )\n  }\n}\n```\n\n### Using selectors\n\nSelectors are good because they prevent you from duplicating code. With it you can just create some functions and use them throughout your application.\n\n```jsx\nimport React from 'react'\nimport { Provider, create } from 'reworm'\n\nconst { select } = create('userStore', { list: ['Peter', 'John'] })\n\nconst johnSelector = select(state =\u003e\n  state.list.find(user =\u003e user.includes('John'))\n)\n\nconst App = () =\u003e (\n  \u003cProvider\u003e\n    \u003cdiv\u003e{johnSelector(user =\u003e user)}\u003c/div\u003e\n  \u003c/Provider\u003e\n)\n```\n\n### Listening state changes\n\nIf you want to listen changes on your state you can use `subscribe()`:\n\n```jsx\nimport React from 'react'\nimport { Provider, create } from 'reworm'\n\nconst user = create('userStore')\n\nclass App extends Component {\n  state = {\n    name: 'John'\n  }\n\n  componentDidMount() {\n    user.subscribe(name =\u003e this.setState({ name }))\n    user.set('Michael')\n  }\n\n  render() {\n    return \u003cdiv\u003eHello {this.state.name}\u003c/div\u003e\n  }\n}\n```\n\n### Hooks \n\nIf you want to use hooks you can use the `useReworm`:\n\n```jsx\nimport React, { useEffect } from 'react'\nimport { Provider, create, useReworm } from 'reworm'\n\nconst store = create('userStore', { name: 'John' })\n\nconst App = () =\u003e {\n  const { get, set } = useReworm('userStore')\n  useEffect(() =\u003e {\n    set(prev =\u003e ({ name: 'Peter' + prev.name }))\n  }, []);\n\n  return (\n    \u003cProvider\u003e\n      \u003cdiv\u003e{get(s =\u003e s.name)}\u003c/div\u003e\n    \u003c/Provider\u003e\n  )\n}\n```\n\n## 🔎 \u0026nbsp; API\n\n#### `create\u003cT\u003e(storeName: string, initial?: T): State`\nCreate a new state\n\n#### `get((state: T) =\u003e React.ReactNode)`\nUse this method to access your state\n\n#### `set((state: T | (prevState: T) =\u003e T) =\u003e T)`\nUse this method to set your state\n\n#### `select\u003cS = any\u003e(selector: (state: T) =\u003e S) =\u003e (fn: GetFn\u003cT\u003e) =\u003e React.ReactNode`\nCreate selectors that can be used with your state and avoid repeating code.\n\n#### `subscribe: (fn: SubscribeFn\u003cT\u003e) =\u003e () =\u003e void`\nUse this method to listen state changes\n\n## 📝 \u0026nbsp; Typings\n\n```ts\ntype PrevState\u003cT\u003e = (prevState: T) =\u003e T\ntype GetFn\u003cT\u003e = (state: T) =\u003e React.ReactNode\ntype SubscribeFn\u003cT\u003e = (state: T) =\u003e any\n\ninterface State\u003cT\u003e {\n  get: (fn: GetFn\u003cT\u003e) =\u003e React.ReactNode\n  set: (next: T | PrevState\u003cT\u003e) =\u003e void\n  select: \u003cS = any\u003e(\n    selector: (state: T) =\u003e S\n  ) =\u003e (fn: GetFn\u003cS\u003e) =\u003e React.ReactNode\n  subscribe: (fn: SubscribeFn\u003cT\u003e) =\u003e () =\u003e void\n}\n\nfunction create\u003cT\u003e(storeName: string, initial: T) =\u003e State\u003cT\u003e\n```\n\n## 🕺 \u0026nbsp; Contribute\n\nIf you want to contribute to this project, please see our [Contributing Guide](/CONTRIBUTING.md) !\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedronauck%2Freworm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedronauck%2Freworm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedronauck%2Freworm/lists"}