react-unistore
v0.0.4
Published
778b connector between React and unistore
Downloads
535
Maintainers
Readme
react-unistore
- Easy to use React Hooks
- Strong TypeScript type safety
- Redux like API
- Small footprint complements unistore nicely (350b + 778b)
unistore already has great support for connecting with React by itself. However at time of writing it does not have support for React Hooks. This package aims to provide this capability, extending the API with something close to Redux’s React Hooks API.
Install
$ yarn add unistore react-unistore
# OR
$ npm install --save unistore react-unistore
API
Provider
Provider exposes a store to context. Required for all other functions to work.
Generally an entire application is wrapped in a single <Provider>
at the root.
export default () => (
<Provider value={store}>
<App />
</Provider>
);
useAction
Used to bind an action to the store.
const setUsername = useAction((state, username) => ({
user: { ...state.user, username },
}));
useSelector
Used to extract values from the store.
const user = useSelector(state => state.user);
useStore
Used to access the store itself. Where possible use useAction
and useSelector
rather than accessing the store directly.
const store = useStore();
connect
Pre-hooks method of connecting to the store. See unistore docs for full details.
Usage (TypeScript)
Create your State. Whilst not necessary it can be helpful to wrap useSelector
and useAction
with your State:
store.ts
import {
Provider,
TypedUseAction,
TypedUseSelector,
useAction as _useAction,
useSelector as _useSelector,
} from "react-unistore";
export interface State {
user: {
firstName?: string;
};
}
export const useSelector: TypedUseSelector<State> = _useSelector;
export const useAction: TypedUseAction<State> = _useAction;
export { Provider };
client.tsx
import { createStore, Provider } from "react-unistore";
const initialState = {
user: {},
};
const store = createStore(initialState);
ReactDOM.render(
<Provider value={store}>
<App />
</Provider>,
document.getElementById("root")
);
ChildComponent.tsx
import { useAction, useSelector } from "./store";
export default function ChildComponent() {
const user = useSelector(state => state.user);
const setFirstName = useAction((state, firstName: string) => ({
user: { ...state, firstName },
}));
return (
<div>
<span>Hi {user.firstName || "you"}</span>
<button onClick={() => setFirstName("Fred")}>Update</button>
</div>
);
}
Migrating from unistore/react
If you are migrating from unistore/react to be able to use functionality available in this package you should find the API fully backwards compatiable. Simply^ change any imports from:
import { Provider, connect } from "unistore/react";
To:
import { Provider, connect } from "react-unistore";
^ With one exception. To align with the standard React Context API patterns the Provider must be passed as the 'value' prop.
export default () => (
- <Provider store={store}>
+ <Provider value={store}>
<App />
</Provider>
);
Package Size of 778 Bytes
Raw File Size (ES6 version): 3.51 KiB
Raw File Size (ES5 version): 4.00 KiB
Minified + Gzip (ES6 version): 778 Bytes
Minified + Gzip (ES5 version): 864 Bytes