{"id":21377810,"url":"https://github.com/ncking/react-simple-store","last_synced_at":"2026-02-04T10:08:33.047Z","repository":{"id":169376152,"uuid":"633443540","full_name":"ncking/react-simple-store","owner":"ncking","description":"A React.js store based on hooks: tiny \u0026 easy to use","archived":false,"fork":false,"pushed_at":"2024-05-29T13:17:07.000Z","size":540,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-14T13:43:34.863Z","etag":null,"topics":["hooks","javascript","mobx-react-alternative","preact","react","react-global-state","react-global-state-manager","react-hooks","react-state-management","react-store","redux","redux-alternative","state-management","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ncking.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-27T14:04:50.000Z","updated_at":"2024-09-29T09:51:39.000Z","dependencies_parsed_at":"2024-05-29T15:19:22.918Z","dependency_job_id":"ff0fdbec-72b5-43e7-9124-6dbc383faafd","html_url":"https://github.com/ncking/react-simple-store","commit_stats":{"total_commits":110,"total_committers":1,"mean_commits":110.0,"dds":0.0,"last_synced_commit":"664d1507fb6874710e17586121be7848f09dbcf1"},"previous_names":["ncking/react-simple-store"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/ncking/react-simple-store","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncking%2Freact-simple-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncking%2Freact-simple-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncking%2Freact-simple-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncking%2Freact-simple-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ncking","download_url":"https://codeload.github.com/ncking/react-simple-store/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncking%2Freact-simple-store/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261891642,"owners_count":23225761,"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":["hooks","javascript","mobx-react-alternative","preact","react","react-global-state","react-global-state-manager","react-hooks","react-state-management","react-store","redux","redux-alternative","state-management","typescript"],"created_at":"2024-11-22T09:23:50.430Z","updated_at":"2026-02-04T10:08:28.007Z","avatar_url":"https://github.com/ncking.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Introduction\r\n\r\nThis is our take on a react store, tiny \u0026 easy to use.\r\nWe have been using this in production for since 2020, mostly on React/Preact, SEO driven websites where performance is key.\r\n\r\n\r\n## Advantages \r\n\r\n- Small bundle size ~0.5K zipped\r\n- Performance - re-rendered only on required state changes\r\n- Familiar api: similar to React-Redux, Zustand, Easy Peasy ...\r\n- Granular module exports adding functionality:  React \u003e\u003e React Redux \u003e\u003e React Redux Connect \r\n- Extensible; if you need additional methods, just add to the store instance\r\n- Separation of state \u0026 actions / reducers ... not combined into one object; simple to reset/reload state\r\n- UseStore; selector instance is not recreated on each render. If your selector maintains state, use the `rebind` argument  to force a new instance.\r\n\r\n\r\n\r\n##\r\n## Installing\r\n\r\n```bash\r\n$ npm i @raiz/react-simple-store\r\n#or\r\n$ yarn add @raiz/react-simple-store\r\n```\r\n##\r\n## Create a store(s)\r\nEach store is created with the `createStore` function.\r\nWe have extended this function with 2 Redux varients: `createStoreRedux` \u0026 `createStoreReduxConnect`;\r\nthese add methos to mimic depatch \u0026 connect apis.\r\nFor all modern projects we recommend just using `createStore`.\r\n\r\n\r\n#### Basic store\r\n```js\r\n// Basic store, with no arguments\r\nimport { createStore } from '@raiz/react-simple-store'\r\nexport const counterStore =  createStore();\r\n\r\n```\r\n\r\n\r\n#### Basic store with initial state \u0026 actions\r\n```js\r\n// Basic store\r\nimport { createStore } from '@raiz/react-simple-store'\r\n\r\nconst state = {\r\n  count: 0,\r\n};\r\n\r\nconst actions = (set, get) =\u003e {\r\n  return {\r\n    increase: () =\u003e set({ count: ++get().count }),\r\n    decrease: () =\u003e set({ count: --get().count }),\r\n  };\r\n};\r\n\r\nexport const counterStore =  createStore({actions, state});\r\n```\r\n\r\n##\r\n## Add additional methods\r\n```js\r\n// Basic store\r\nimport { createStore } from '@raiz/react-simple-store'\r\nimport { shallowEqual } from '@raiz/react-simple-store/utils'\r\nconst state = {\r\n  count: 0,\r\n};\r\n\r\nconst actions = (set, get) =\u003e {\r\n  return {\r\n    increase: () =\u003e set({ count: ++get().count }),\r\n    decrease: () =\u003e set({ count: --get().count }),\r\n  };\r\n};\r\n\r\nexport const counterStore =  createStore({actions, state});\r\n// add a hook method with shallowEqual fn\r\ncounterStore.useStoreShallow = selector =\u003e counterStore.useStore(selector, shallowEqual)\r\n```\r\n\r\n\r\n##\r\n## Export your store\r\nWe recommend creating a store in its own file \u0026 exporting.\r\nYou can export the stores methods, or the store object.\r\nWe prefer exporting the store object, this makes it clear \u0026 consistent when multiple stores may be consumed in the same file.\r\n\r\n```js\r\n// export store methods\r\n// The downside is we must name all the custom actions \u0026 most likely will have to alias \r\nexport const { useStore, getState, setState, destroy, subscribe} = createStore({actions, state});\r\n\r\n// export the store instance; clear \u0026 consistent\r\nexport const counterStore = createStore({actions, state});\r\n```\r\n\r\n##\r\n## Using your store(s)\r\n\r\n\r\n```js\r\n// Basic hook usage\r\nimport { counterStore } from './counterstore'\r\n\r\nconst Component = (props) =\u003e {\r\n  const count = counterStore.useStore((s) =\u003e s.count);\r\n  return (\r\n    \u003cdiv\u003e\r\n      \u003cdiv data-testid=\"count\"\u003e{count}\u003c/div\u003e\r\n      \u003cbutton type=\"button\" onClick={counterStore.increase}\u003e+\u003c/button\u003e\r\n    \u003c/div\u003e\r\n  );\r\n};\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncking%2Freact-simple-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fncking%2Freact-simple-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncking%2Freact-simple-store/lists"}