{"id":13511351,"url":"https://github.com/gunn/pure-store","last_synced_at":"2025-05-07T09:44:25.233Z","repository":{"id":28952780,"uuid":"119823007","full_name":"gunn/pure-store","owner":"gunn","description":"A tiny immutable store with type safety.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:45:39.000Z","size":1376,"stargazers_count":148,"open_issues_count":17,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-02T13:05:48.596Z","etag":null,"topics":["frontend","hooks","immutability","react","react-hooks","react-native","reactjs","state","state-management","typescript"],"latest_commit_sha":null,"homepage":null,"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/gunn.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":"2018-02-01T10:51:34.000Z","updated_at":"2024-11-01T13:56:25.000Z","dependencies_parsed_at":"2023-01-14T13:49:34.095Z","dependency_job_id":null,"html_url":"https://github.com/gunn/pure-store","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gunn%2Fpure-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gunn%2Fpure-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gunn%2Fpure-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gunn%2Fpure-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gunn","download_url":"https://codeload.github.com/gunn/pure-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252853179,"owners_count":21814477,"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":["frontend","hooks","immutability","react","react-hooks","react-native","reactjs","state","state-management","typescript"],"created_at":"2024-08-01T03:00:48.043Z","updated_at":"2025-05-07T09:44:25.214Z","avatar_url":"https://github.com/gunn.png","language":"TypeScript","funding_links":[],"categories":["react","TypeScript","List"],"sub_categories":[],"readme":"# pure-store\n\n[![Coverage Status](https://coveralls.io/repos/github/gunn/pure-store/badge.svg?branch=master)](https://coveralls.io/github/gunn/pure-store?branch=master)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/pure-store?color=%23f60)](https://bundlephobia.com/result?p=pure-store)\n[![Build Status](https://travis-ci.org/gunn/pure-store.svg?branch=master)](https://travis-ci.org/gunn/pure-store)\n[![npm](https://img.shields.io/npm/v/pure-store.svg)](https://www.npmjs.com/package/pure-store)\n[![mit](https://img.shields.io/npm/l/pure-store.svg)](https://opensource.org/licenses/MIT)\n[![typescript](https://img.shields.io/badge/TypeScript-%E2%9C%93-007ACC.svg)](https://www.typescriptlang.org/)\n\n\u003e Just edit your app's state.\n\n`pure-store` is a fast, simple, immutable store that lets you update state directly (i.e. imperatively). It also works excellently with typescript.\n\n## Comparison with redux\n\u003cimg src=\"comparison.png\" width=\"914\"/\u003e\n\n## With React Hooks\n`pure-store` can be used without react, but if you are using react you can use the `usePureStore` hook. We could create the simple counter from the image above like this:\n```javascript\nimport createStore from \"pure-store/react\"\n\nconst store = createStore({ count: 0 })\n\nexport default ()=\u003e {\n  const [state, update] = store.usePureStore()\n\n  return (\n    \u003cdiv\u003e\n      Counter: { state.count }\n      \u003ca onClick={()=\u003e update({count: count+1})}\u003e + \u003c/a\u003e\n      \u003ca onClick={()=\u003e update({count: count-1})}\u003e - \u003c/a\u003e\n    \u003c/div\u003e\n  )\n}\n```\nIf you use react, then congratulations - you know everything you need to to manage state in your app. Because the data is updated immutably, you can pass pieces of the store's state to your `React.memo` components and they will re-render only when the data has changed giving you excellent performance.\n\n## Without Hooks\nTo use `pure-store` without react hooks you need to create a store, and know how to use a couple of methods.\n\n### `createStore(initialState)`\nCreates a new store with an initial state. You can create multiple independent stores, although usually one is enough.\n\n```javascript\nimport createStore from 'pure-store'\n\nconst store = createStore({ count: 0 })\n```\n\nIf you're using typescript, you can get type checking and autocompletion automatically with the rest of your `pure-store` usage:\n```typescript\ninterface State {\n  user: User\n  messages: {\n    user: User\n    text: string\n    starred?: boolean\n  }[]\n  lastMessageAt?: Date\n  messageCount: number\n}\n\nconst state: State = {\n  user: getUser(),\n  messages: []\n}\n\nconst store = createStore(state)\n```\n\n### `state` / `getState()`\nReturns the current state from the store.\n\n```jsx\nconsole.log(\"last message date:\", store.getState().lastMessageAt)\n\nconst Messages = ()=\u003e {\n  const { user, messages, lastMessageAt } = store.state\n\n  return (\n    \u003cdiv\u003e\n      \u003ch3\u003eMessages for {user.name}\u003c/h3\u003e\n      \u003cul\u003e\n        {\n          messages.map(m=\u003e (\n            \u003cMessage message={m} /\u003e\n          ))\n        }\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### `update(updater)`\nUse this anytime you want to update store data. The `updater` argument can either be an object in which case it works just like react's `setState`, or it can be a function, in which case it's given a copy of the state which can be modified directly.\n\n```javascript\nstore.update({ lastMessageAt: new Date() })\n\nstore.update(s=\u003e {\n  s.messageCount++\n  s.messages.push(message)\n  s.lastMessageAt = new Date()\n})\n```\n\n### `subscribe(callback)`\nTo re-render components when you update the store, you should subscribe to the store. The `subscribe` method takes a callback that takes no arguments. It returns a method to remove that subscription. You can subscribe many times to one store.\n\nThe recommended way is to re-render your whole app - `pure-store` can make this very efficient because immutable state lets you use `React.PureComponent` classes.\n```javascript\nconst render = ()=\u003e {\n  ReactDOM.render(\u003cApp /\u003e, document.getElementById('root'))\n}\n\nstore.subscribe(render)\nrender()\n```\n\nYou could also use forceUpdate within a component e.g.:\n```javascript\nclass App extends React.Component {\n  constructor() {\n    store.subscribe(()=\u003e this.forceUpdate())\n  }\n  //...\n```\n\n### bonus: `storeFor(getter)`, `updaterFor(getter)`, and usePureStore(getter)\nThese methods let you define a subset of the store as a shortcut, so you don't have to reference the whole chain every time.\n\n```javascript\nconsole.log(store.user.profile.address.city)\nstore.update(s=\u003e s.user.profile.address.city = \"Wellington\")\n\n// vs\nconst addressStore   = store.storeFor(s=\u003e s.user.profile.address)\nconst addressUpdater = store.updaterFor(s=\u003e s.user.profile.address)\n\n// and then:\nconsole.log(addressStore.state.city)\naddressUpdater(a=\u003e a.city = \"Wellington\")\n```\nWhich can be useful in larger projects.\n\n## Patterns\n\n### Actions\nOther state management libraries have a concept of using 'actions' and 'action creators' for controlled state updates. You may well find them unnecessary, but if you miss them, you can easily do something similar:\n\n```jsx\n// actions.js\nimport store from './store'\nexport function postMessage(text) {\n  store.update(s=\u003e {\n    s.messages.push({\n      user: s.user,\n      text\n    })\n    s.lastMessageAt = new Date()\n  })\n}\n\n// component.js\n  //...\n  \u003cbutton onClick={()=\u003e postMessage(this.props.text)} /\u003e\n  //...\n\n```\n\n### Persistence\nIf you want to persist data between sessions, it can be done very simply. You just need a way to serialize and de-serialize your data. If you use only basic data types, you can use `JSON.stringify` and `JSON.parse`:\n```javascript\nconst STORAGE_KEY = \"myapp-data\"\nconst storedData = JSON.parse(localStorage.getItem(STORAGE_KEY))\n\nconst store = createStore(storedData || getDefaultData())\n\nwindow.addEventListener(\"beforeunload\", ()=\u003e {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify(store.state))\n})\n```\n\n## Future\n\n`pure-store` is stable now, and I do not anticipate a need to change the API. The focus for now is improving the documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgunn%2Fpure-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgunn%2Fpure-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgunn%2Fpure-store/lists"}