@mattdesl/unistore

FORK

This fork includes a __$$unistore_connect variable in the wrapper component, which can be checked by other modules like @mattdesl/preact-transition-group for automatic connect().

This is an experimental fork.

--

A tiny ~650b centralized state container with component bindings for Preact & React.

• Small footprint complements Preact nicely
• Familiar names and ideas from Redux-like libraries
• Useful data selectors to extract properties from state
• Portable actions can be moved into a common place and imported
• Functional actions are just reducers
• NEW: seamlessly run Unistore in a worker via Stockroom

Table of Contents

• Install
• Usage
• Examples
• API
• License

Install

This project uses node and npm. Go check them out if you don't have them locally installed.

1npm install --save unistore

Then with a module bundler like webpack or rollup, use as you would anything else:

1// The store:
2import createStore from 'unistore'
3
4// Preact integration
5import { Provider, connect } from 'unistore/preact'
6
7// React integration
8import { Provider, connect } from 'unistore/react'

Alternatively, you can import the "full" build for each, which includes both createStore and the integration for your library of choice:

1import { createStore, Provider, connect } from 'unistore/full/preact'

The UMD build is also available on unpkg:

1<!-- just unistore(): -->
2<script src="//unpkg.com/unistore/dist/unistore.umd.js"></script>
3<!-- for preact -->
4<script src="//unpkg.com/unistore/full/preact.umd.js"></script>
5<!-- for react -->
6<script src="//unpkg.com/unistore/full/react.umd.js"></script>

You can find the library on window.unistore.

Usage

1import createStore from 'unistore'
2import { Provider, connect } from 'unistore/preact'
3
4let store = createStore({ count: 0 })
5
6// If actions is a function, it gets passed the store:
7let actions = store => ({
8  // Actions can just return a state update:
9  increment(state) {
10    return { count: state.count+1 }
11  },
12
13  // The above example as an Arrow Function:
14  increment2: ({ count }) => ({ count: count+1 }),
15
16  //Actions receive current state as first parameter and any other params next
17  //check this function as <button onClick={incrementAndLog}>
18  incrementAndLog: ({ count }, event) => {
19    console.info(event)
20    return { count: count+1 }
21  },
22
23  // Async actions can be pure async/promise functions:
24  async getStuff(state) {
25    let res = await fetch('/foo.json')
26    return { stuff: await res.json() }
27  },
28
29  // ... or just actions that call store.setState() later:
30  incrementAsync(state) {
31    setTimeout( () => {
32      store.setState({ count: state.count+1 })
33    }, 100)
34  }
35})
36
37const App = connect('count', actions)(
38  ({ count, increment }) => (
39    <div>
40      <p>Count: {count}</p>
41      <button onClick={increment}>Increment</button>
42    </div>
43  )
44)
45
46export default () => (
47  <Provider store={store}>
48    <App />
49  </Provider>
50)

Debug

Make sure to have Redux devtools extension previously installed.

1import createStore from 'unistore'
2import devtools    from 'unistore/devtools'
3
4let initialState = { count: 0 };
5let store = process.env.NODE_ENV === 'production' ?  createStore(initialState) : devtools(createStore(initialState));
6
7// ...

Examples

README Example on CodeSandbox

API

Reporting Issues

Found a problem? Want a new feature? First of all, see if your issue or idea has already been reported. If not, just open a new clear and descriptive issue.

License

MIT License © Jason Miller