---

Table of Contents

• Installation
• Docs
  • Setup
  • useStore
  • useSelector
  • useAction
• LICENSE

Installation

This package has Preact 10+ and Unistore 3.4+ as peer dependencies.

npm install @preact-hooks/unistore or yarn add @preact-hooks/unistore

You can also load it via the unpkg CDN

https://unpkg.com/@preact-hooks/unistore will download the latest UMD bundle.

Docs

Setup

To get started wrap your app in a Provider component to make the store available throughout the entire component tree.

1import { StoreProvider }  from '@preact-hooks/unistore'
2
3import createStore from 'unistore';
4import devtools from 'unistore/devtools';
5
6const initialStore = {}
7
8const store = (process.env.NODE_ENV === 'production') 
9  ? createStore(initialStore) 
10  : devtools(createStore(initialStore))
11
12function App() {
13  return (
14    <StoreProvider value={store}>
15      // ...  
16    </StoreProvider>
17  )
18}

🎉 Now you are ready to start using the hooks listed below in your function components.

useStore

1const store = useStore()

This hook returns a reference to the same Unistore store that was passed into the StoreProvider component.

This hook should probably not be used frequently. Prefer useSelector as your primary choice. However, this may be useful for less common scenarios that do require access to the store.

1import { useStore } from '@preact-hooks/unistore'
2
3function MyComponent() {
4  const store = useStore()
5
6  // ...
7}

useSelector

1// You can pass in a selector function such as (s) => s.prop
2// Or, you can pass in a string such as 'foo,bar' which will return { foo, bar }
3const result = useSelector(selector, equalityFn?)

To learn about this hook checkout the amazing docs over at React Redux.

Pay attention to:

• Equality Comparisons and Updates
• Usage Warnings
• Performance

There is a convenient equality function called shallowEqual included. You can use this with the useSelector hook if you require it. If you're not sure when you'd need this then click on the link above titled "Equality Comparisons and Updates".

1import shallowEqual from '@preact-hooks/unistore/shallowEqual'
2
3function MyComponent() {
4  const result = useSelector(selectorFn, shallowEqual)
5
6  // ...
7}

You could also use something like the Lodash _.isEqual() utility or Immutable.js's comparison capabilities. It's up to you how the equality check is performed.

You can also checkout Reselect which is a "selector" library for Redux.

useAction

1const action = useAction(actionFn)

This hook is used to create Unistore actions. The function passed into the hook is identical to how you would create an action for Unistore, they receive the current state and return a state update.

1import { useAction } from '@preact-hooks/unistore'
2
3import { h } from 'preact'
4
5function Counter() {
6  const increment = useAction(({ count }) => ({ count: count + 1 }));
7  
8  return (<button onClick={increment}>Click me</button>);
9}

If your actions are defined in another file then just import it and pass it through.

1// ...
2
3import { increment } from 'myActionsFile.js'
4
5function Counter() {
6  const increment = useAction(increment);
7
8  // ...  
9}

LICENSE

MIT