forked from coldemo/gallery.code
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgenji.jsx
More file actions
120 lines (112 loc) · 2.9 KB
/
genji.jsx
File metadata and controls
120 lines (112 loc) · 2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
await loadJs([
'https://unpkg.com/[email protected]/dist/react-redux.js',
'https://unpkg.com/[email protected]/dist/index.min.js',
])
let { Provider, useSelector, useDispatch } = ReactRedux
let numberUnit = {
namespace: 'number',
state: { num: 0, desc: { num: 0 } },
actionCreators: {
add({ type, payload }, { getState, pick, save }) {
let num = pick('num');
save({ num: num + payload });
},
async saveAsync(action, { getState, pick, save }) {
return fetch('/mock')
.then(response => response.json())
.then(data => {
save({ num: data.saveNum });
save({ desc: { num: data.saveNum } });
})
.catch(e => {
console.error('fetch error:', e);
});
}
}
};
let userUnit = {
namespace: 'user',
state: { name: 'zhangsan', num: 0 },
actionCreators: {
async saveOther(action, { getState, pick, save }) {
return fetch('/mock')
.then(response => response.json())
.then(data => {
save({ num: data.saveNum + pick('num', 'number') }, 'number');
})
.catch(e => {
console.error('fetch error:', e);
});
}
}
};
let genji = new Genji({ injectAsyncLoading: true, autoUpdateAsyncLoading: true });
let unitTypes = {
numberUnit: genji.model(numberUnit),
userUnit: genji.model(userUnit),
}
genji.start();
let store = genji.getStore()
let GenjiApp = () => {
let dispatch = useDispatch()
let props = {
...useSelector(state => state),
add: () => {
dispatch({
type: unitTypes['numberUnit'].add,
payload: 1
});
},
saveAsync: () => {
dispatch({
type: unitTypes['numberUnit'].saveAsync
});
},
saveOther: () => {
dispatch({
type: unitTypes['userUnit'].saveOther
});
}
}
useEffect(() => {
props.saveAsync();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<div>
{props.number.saveAsyncLoading ? (
<div>Loading...</div>
) : (
<div onClick={props.saveAsync}>init num from mock (click me)</div>
)}
<div onClick={props.add}>action test (click me)</div>
{props.user.saveOtherLoading ? (
<div>Loading...</div>
) : (
<div onClick={props.saveOther}>save num from other model (click me)</div>
)}
<div>current number is: {props.number.num}</div>
</div>
)
}
let App = () => {
return (
<div style={{ padding: 20 }}>
<div>
<h1>Genji</h1>
<a target="_blank" href="https://github.com/kelekexiao123/genjijs">
https://github.com/kelekexiao123/genjijs
</a>
</div>
<br />
<Provider store={store}>
<GenjiApp />
</Provider>
</div>
)
}
let sleep = (ms) => new Promise(r => setTimeout(r, ms))
let fetch = async () => {
await sleep(1000)
return { json: () => ({ "message": "ojbk", "saveNum": 100 }) }
}