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
|
import React from 'react';
import produce, * as immer from 'immer';
const {
createContext,
memo,
useRef,
useEffect,
useCallback,
useContext,
useState
} = React;
const StateContext = createContext(null);
const DispatchContext = createContext(null);
export { immer };
export function useStoreState() {
return useContext(StateContext);
}
export function useStoreDispatch() {
return useContext(DispatchContext);
}
export default function Provider({ initialState, children }) {
const stateRef = useRef(initialState);
const [state, setState] = useState(initialState);
const getState = useCallback(() => stateRef.current, []);
useEffect(() => {
if (process.env.NODE_ENV === 'development') {
window.getState2 = getState;
}
}, [getState]);
const dispatch = useCallback(
(actionId, fn) => {
if (typeof actionId === 'function') return actionId(dispatch, getState);
const stateNext = produce(getState(), fn);
if (stateNext !== stateRef.current) {
if (process.env.NODE_ENV === 'development') {
// eslint-disable-next-line no-console
console.log(actionId, stateNext);
}
stateRef.current = stateNext;
setState(stateNext);
}
},
[getState]
);
return (
<StateContext.Provider value={state}>
<DispatchContext.Provider value={dispatch}>
{children}
</DispatchContext.Provider>
</StateContext.Provider>
);
}
export function connect(mapStateToProps) {
return Component => {
const MemoComponent = memo(Component);
function Connected(props) {
const state = useContext(StateContext);
const dispatch = useContext(DispatchContext);
const mapped = mapStateToProps(state, props);
const nextProps = {
...props,
...mapped,
dispatch
};
return <MemoComponent {...nextProps} />;
}
return Connected;
};
}
|
