\r\n\r\n### pullstate\r\n\r\n> Ridiculously simple state stores with performant retrieval anywhere\r\n> in your React tree using the wonderful concept of React hooks!\r\n\r\n* ~7KB minified and gzipped! (excluding Immer and React)\r\n* Built with Typescript, providing a great dev experience if you're using it too\r\n* Uses [immer](https://github.com/mweststrate/immer) for state updates - easily and safely mutate your state directly!\r\n* **NEW** - [Create async actions](https://lostpebble.github.io/pullstate/docs/async-actions-introduction) and use React hooks or `` to have complete control over their UI states!\r\n\r\n_Originally inspired by the now seemingly abandoned library - [bey](https://github.com/jamiebuilds/bey). Although substantially\r\ndifferent now- with Server-side rendering and Async Actions built in! Bey was in turn inspired by\r\n[react-copy-write](https://github.com/aweary/react-copy-write)._\r\n\r\nTry out a quick example:\r\n\r\n[](https://codesandbox.io/s/myvj8zzypp)\r\n\r\n### 🎉 **[New documentation site is live!](https://lostpebble.github.io/pullstate/)**\r\n\r\n* [Installation](https://lostpebble.github.io/pullstate/docs/installation)\r\n* [Quick example](https://lostpebble.github.io/pullstate/docs/quick-example)\r\n* [Quick example - Server rendering](https://lostpebble.github.io/pullstate/docs/quick-example-server-rendered)\r\n* [Async Actions](https://lostpebble.github.io/pullstate/docs/async-actions-introduction)\r\n * [Creation](https://lostpebble.github.io/pullstate/docs/async-actions-creating)\r\n * [Usage](https://lostpebble.github.io/pullstate/docs/async-action-use)\r\n * [Async action hooks](https://lostpebble.github.io/pullstate/docs/async-hooks-overview)\r\n\r\n---\r\n\r\n# **Let's dive right in**\r\n\r\n> This is taken directly from [the documentation site](https://lostpebble.github.io/pullstate/docs/quick-example), to give you a quick overview of Pullstate here on github. Be sure to check out the site to learn more.\r\n\r\nTo start off, install `pullstate`.\r\n\r\n```bash\r\nyarn add pullstate\r\n```\r\n\r\n## Create a store\r\n\r\nDefine the first **state store**, by passing an initial state to `new Store()`:\r\n\r\n\r\n```jsx\r\nimport { Store } from \"pullstate\";\r\n\r\nexport const UIStore = new Store({\r\n isDarkMode: true,\r\n});\r\n```\r\n\r\n## Read our store's state\r\n\r\nThen, in React, we can start using the state of that store using a simple hook `useState()`:\r\n\r\n```tsx\r\nimport * as React from \"react\";\r\nimport { UIStore } from \"./UIStore\";\r\n\r\nexport const App = () => {\r\n const isDarkMode = UIStore.useState(s => s.isDarkMode);\r\n\r\n return (\r\n \r\n
Hello Pullstate
\r\n \r\n );\r\n};\r\n```\r\n\r\nThe argument to `useState()` over here (`s => s.isDarkMode`), is a selection function that ensures we select only the state that we actually need for this component. This is a big performance booster, as we only listen for changes (and if changed, re-render the component) on the exact returned values - in this case, simply the value of `isDarkMode`.\r\n\r\n---\r\n\r\n## Add interaction (update state)\r\n\r\nGreat, so we are able to pull our state from `UIStore` into our App. Now lets add some basic interaction with a `\r\n \r\n );\r\n```\r\n\r\nNotice how we call `update()` on `UIStore`, inside which we directly mutate the store's state. This is all thanks to the power of `immer`, which you can check out [here](https://github.com/immerjs/immer).\r\n\r\nAnother pattern, which helps to illustrate this further, would be to actually define the action of toggling dark mode to a function on its own:\r\n\r\n\r\n```tsx\r\nfunction toggleMode(s) {\r\n s.isDarkMode = !s.isDarkMode;\r\n}\r\n\r\n// ...in our
![\"Pullstate\"](\"https://github.com/lostpebble/pullstate/raw/master/graphics/logo-newest.png\"){kind=logo}
\r\n