\n\n# unistore\n\n> A tiny 350b centralized state container with component bindings for [Preact] & [React].\n\n- **Small** footprint complements Preact nicely _(unistore + unistore/preact is ~650b)_\n- **Familiar** names and ideas from Redux-like libraries\n- **Useful** data selectors to extract properties from state\n- **Portable** actions can be moved into a common place and imported\n- **Functional** actions are just reducers\n- **NEW**: seamlessly run Unistore in a worker via [Stockroom](https://github.com/developit/stockroom)\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [Examples](#examples)\n- [API](#api)\n- [License](#license)\n\n## Install\n\nThis project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.\n\n```sh\nnpm install --save unistore\n```\n\nThen with a module bundler like [webpack](https://webpack.js.org) or [rollup](http://rollupjs.org), use as you would anything else:\n\n```js\n// The store:\nimport createStore from 'unistore'\n\n// Preact integration\nimport { Provider, connect } from 'unistore/preact'\n\n// React integration\nimport { Provider, connect } from 'unistore/react'\n```\n\nAlternatively, you can import the \"full\" build for each, which includes both `createStore` and the integration for your library of choice:\n\n```js\nimport { createStore, Provider, connect } from 'unistore/full/preact'\n```\n\nThe [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):\n\n```html\n\n\n\n\n\n\n```\n\nYou can find the library on `window.unistore`.\n\n### Usage\n\n```js\nimport createStore from 'unistore'\nimport { Provider, connect } from 'unistore/preact'\n\nlet store = createStore({ count: 0, stuff: [] })\n\nlet actions = {\n // Actions can just return a state update:\n increment(state) {\n // The returned object will be merged into the current state\n return { count: state.count+1 }\n },\n\n // The above example as an Arrow Function:\n increment2: ({ count }) => ({ count: count+1 }),\n\n // Actions receive current state as first parameter and any other params next\n // See the \"Increment by 10\"-button below\n incrementBy: ({ count }, incrementAmount) => {\n return { count: count+incrementAmount }\n },\n}\n\n// If actions is a function, it gets passed the store:\nlet actionFunctions = store => ({\n // Async actions can be pure async/promise functions:\n async getStuff(state) {\n const res = await fetch('/foo.json')\n return { stuff: await res.json() }\n },\n\n // ... or just actions that call store.setState() later:\n clearOutStuff(state) {\n setTimeout(() => {\n store.setState({ stuff: [] }) // clear 'stuff' after 1 second\n }, 1000)\n }\n\n // Remember that the state passed to the action function could be stale after\n // doing async work, so use getState() instead:\n incrementAfterStuff(state) {\n const res = await fetch('foo.json')\n const resJson = await res.json()\n // the variable 'state' above could now be old,\n // better get a new one from the store\n const upToDateState = store.getState()\n\n return {\n stuff: resJson,\n count: upToDateState.count + resJson.length,\n }\n }\n})\n\n// Connecting a react/preact component to get current state and to bind actions\nconst App1 = connect('count', actions)(\n ({ count, increment, incrementBy }) => (\n
\n
Count: {count}
\n \n \n
\n )\n)\n\n// First argument to connect can also be a string, array or function while\n// second argument can be an object or a function. Here we pass an array and\n// a function.\nconst App2 = connect(['count', 'stuff'], actionFunctions)(\n ({ count, stuff, getStuff, clearOutStuff, incrementAfterStuff }) => (\n
![\"unistore\"](\"https://i.imgur.com/o0u6dto.png\")
\n ![\"npm\"](\"https://img.shields.io/npm/v/unistore.svg?style=flat\")
![\"travis\"](\"https://travis-ci.org/developit/unistore.svg?branch=master\")
\n