Skip to content

Commit 710aed1

Browse files
authored
Update README.md
1 parent 192d13c commit 710aed1

1 file changed

Lines changed: 122 additions & 0 deletions

File tree

README.md

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,123 @@
11
# useRestate
2+
3+
A React hook that subscribes your state selector to the store.
4+
5+
## Install
6+
7+
```bash
8+
# Yarn
9+
yarn add use-restate
10+
11+
# NPM
12+
npm install use-restate
13+
```
14+
15+
## Usage
16+
17+
> React hooks require react & react-dom at version 16.7.0-alpha.0 or higher.
18+
19+
`use-restate` requires you to provide your Redux-like store to `RestateProvider`.
20+
21+
### Setting up the store
22+
23+
Before using the hook, your store should be passed to `RestateProvider`.
24+
25+
```js
26+
import React from 'react';
27+
import { createStore } from 'redux';
28+
import { RestateProvider, RestateContext } from 'use-restate';
29+
30+
const Actions = {
31+
INCREMENT: 'INCREMENT',
32+
DECREMENT: 'DECREMENT',
33+
};
34+
35+
const Reducer = (state: { count: number }, action: any) => {
36+
switch (action.type) {
37+
case Actions.INCREMENT:
38+
return {
39+
count: state.count + 1,
40+
};
41+
case Actions.DECREMENT:
42+
return {
43+
count: state.count - 1,
44+
};
45+
default:
46+
return state;
47+
}
48+
};
49+
50+
const store = createStore(Reducer, { count: 3 });
51+
52+
export default function App() {
53+
return (
54+
<RestateProvider value={store}>
55+
...
56+
</RestateProvider>
57+
);
58+
}
59+
```
60+
61+
### `useRestate(mapState)`
62+
63+
Automatically subscribe your mapState selectors to the store so that each of them update on every change.
64+
65+
```js
66+
import React from 'react';
67+
import { useRestate } from 'use-restate';
68+
69+
export default function Component() {
70+
const { count } = useRestate(state => {
71+
return { count: state.count };
72+
});
73+
74+
return (
75+
<div>
76+
<p>{count}</p>
77+
</div>
78+
);
79+
}
80+
```
81+
82+
### `useAction(action)`
83+
84+
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.
85+
86+
```js
87+
import React from 'react';
88+
import { useAction } from 'use-restate';
89+
90+
export default function Component() {
91+
const incrementAction = { type: 'INCREMENT' };
92+
const increment = useAction(incrementAction);
93+
94+
return (
95+
<div>
96+
<a onClick={increment}>Increment count</a>
97+
</div>
98+
);
99+
}
100+
```
101+
102+
### `useDispatch()`
103+
104+
Returns the `dispatch` method based on the store.
105+
106+
```js
107+
import React from 'react';
108+
import { useDispatch } from 'use-restate';
109+
110+
export default function Component() {
111+
const dispatch = useDispatch();
112+
113+
return (
114+
<div>
115+
<a onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement count</a>
116+
</div>
117+
);
118+
}
119+
```
120+
121+
## License
122+
123+
![MIT License](LICENSE)

0 commit comments

Comments
 (0)