Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/animify/userestate
⚡️ React Hook that subscribes your state selector to the store.
https://github.com/animify/userestate
action react react-hooks redux restate store
Last synced: about 1 month ago
JSON representation
⚡️ React Hook that subscribes your state selector to the store.
- Host: GitHub
- URL: https://github.com/animify/userestate
- Owner: animify
- License: mit
- Created: 2018-12-01T18:30:27.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-04T20:44:31.000Z (about 6 years ago)
- Last Synced: 2024-11-16T18:19:47.468Z (about 1 month ago)
- Topics: action, react, react-hooks, redux, restate, store
- Language: TypeScript
- Homepage: https://github.com/animify/useRestate
- Size: 304 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# useRestate ⚡️
A React Hook that subscribes your state selector to the store and memoizes your action dispatchers.
```js
import React from 'react';
import { useActions, useRestate } from 'use-restate';
function Count() {
const { count } = useRestate(state => ({
count: state.count
}));
const { increment, decrement } = useActions({
increment: { type: 'INCREMENT' },
decrement: { type: 'DECREMENT' },
});
return (
{count}
Increment
Decrement
);
}
```
## Install
```bash
# Yarn
yarn add use-restate
# NPM
npm install use-restate
```
## Features
- Feather light
- Avoid needless re-renders
- A familiar API
- Works with any Redux-like store
- Memoize single or multiple action dispatch functions
- Quick access to store dispatch
- Full Typescript support
- Works without `react-redux`
## Prerequisites
⚠️ React hooks require `react` & `react-dom` at version 16.7.0-alpha.0 or higher.
## Usage
The `use-restate` package requires you to provide your Redux-like store to `RestateProvider`.
### Setting up the store
Before using the hook, your store should be passed to `RestateProvider`. You also have access to `RestateContext` should you need it to inject middleware.
```js
import React from 'react';
import { createStore } from 'redux';
import { RestateProvider, RestateContext } from 'use-restate';
import combinedReducers from './reducers';
...
const store = createStore(combinedReducers, { count: 3 });
export default function App() {
return (
...
);
}
```
## API
### `useRestate(mapState)`
Automatically subscribe your mapState selectors to the store so that each of them update on every change.
```js
import React from 'react';
import { useRestate } from 'use-restate';
export default function Component() {
const { count } = useRestate(state => {
return { count: state.count };
});
return (
{count}
);
}
```
### `useAction(action)`
Wraps the action in a dispatcher and memoizes it so that it can be used freely in a React component. Internally uses `useCallback()` to memoize the dispatch function.
```js
import React from 'react';
import { useAction } from 'use-restate';
export default function Component() {
const incrementAction = { type: 'INCREMENT' };
const increment = useAction(incrementAction);
return (
);
}
```
### `useActions(actionsMap)`
Wraps a map of actions in a dispatcher and memoizes each one with `useCallback`. Returns the same map with each key containing its paired action dispatcher.
```js
import React from 'react';
import { useActions } from 'use-restate';
export default function Component() {
const { increment, decrement } = useActions({
increment: { type: 'INCREMENT' },
decrement: { type: 'DECREMENT' },
});
return (
);
}
```
### `useDispatch()`
Returns the `dispatch` method based on the store.
```js
import React from 'react';
import { useDispatch } from 'use-restate';
export default function Component() {
const dispatch = useDispatch();
return (
dispatch({ type: 'DECREMENT' })}>Decrement count
);
}
```
## Issues & suggestions
If you find any runtime issues or have any suggestions on how to improve the package please do open an !
## License
