-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.jsx
96 lines (88 loc) · 1.88 KB
/
index.jsx
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
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { createStore } from 'redux';
import localforage from 'localforage';
import {
PersistGate,
DefaultStorage,
persist,
persistStore,
} from './library/main';
const count = (state = 0, action) => {
switch (action.type) {
case 'add':
return state + 1;
case 'sub':
return state - 1;
default:
return state;
}
};
const count2 = (state = 0, action) => {
switch (action.type) {
case 'add':
return state + 1;
case 'sub':
return state - 1;
default:
return state;
}
};
DefaultStorage.set(
localforage.createInstance({
name: 'redux-persist',
// storeName: 'redux-persist2',
}),
);
const store = createStore(
persist(
{
count,
count2,
},
{
// whiteList: ['count'],
// blackList: ['count2'],
prefix: 'prefix',
expired: 10000,
},
),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
// applyMiddleware(createLogger()),
);
const persistor = persistStore(store);
const Counter = () => {
const currentCount = useSelector(
React.useRef((state) => state.count).current,
);
const dispatch = useDispatch();
return (
<div style={{ width: 200, height: 300 }}>
<span>count: {currentCount}</span>
<button
onClick={() => {
dispatch({ type: 'add' });
dispatch({ type: 'add' });
}}>
add
</button>
<button onClick={() => dispatch({ type: 'sub' })}>sub</button>
</div>
);
};
function App() {
return (
<Provider store={store}>
<PersistGate persistor={persistor}>
<Counter />
</PersistGate>
</Provider>
);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
);