diox
Search…
diox/connectors/react
Official diox connector for React.

Usage

Diox connector for React relies on the concept of hooks.
1
// main.jsx
2
// --------------------------
3
import * as React from 'react';
4
import * as ReactDOM from 'react-dom';
5
import Counter from './Counter.jsx';
6
7
ReactDOM.render(<Counter />, document.body);
8
9
10
// store.js
11
// --------------------------
12
import { Store } from 'diox';
13
14
const store = new Store();
15
store.register('my-module', {
16
state: {
17
count: 0,
18
},
19
mutations: {
20
INCREMENT: ({ state }) => {
21
return state.count + 1;
22
},
23
},
24
actions: {
25
incrementAsync: ({ mutate, hash }) => {
26
setTimeout(() => {
27
mutate(hash, INCREMENT);
28
}, 250);
29
},
30
},
31
});
32
33
export default store;
34
35
36
// Counter.jsx
37
// --------------------------
38
import * as React from 'react';
39
import useStore from 'diox/connectors/react';
40
import store from './store.jsx';
41
42
const [useCombiner, mutate, dispatch] = useStore(store);
43
44
export default function Button(props) {
45
const [count] = useCombiner('my-module', (newState) => newState.count);
46
const doSomething = () => {
47
dispatch('my-module', 'incrementAsync');
48
};
49
return <button type="button" onClick={doSomething}>{count}</button>;
50
}
51
Copied!
Last modified 5mo ago
Copy link
Contents
Usage