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
|
import React from 'react';
import produce, * as immer from 'immer';
const {
createContext,
memo,
useMemo,
useRef,
useEffect,
useCallback,
useContext,
useState,
} = React;
export { immer };
const StateContext = createContext(null);
const DispatchContext = createContext(null);
const ActionsContext = createContext(null);
export function useStoreState() {
return useContext(StateContext);
}
export function useStoreDispatch() {
return useContext(DispatchContext);
}
export function useStoreActions() {
return useContext(ActionsContext);
}
// boundActionCreators
export default function Provider({ initialState, actions = {}, 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]
);
const boundActions = useMemo(() => bindActions(actions, dispatch), [
actions,
dispatch,
]);
return (
<StateContext.Provider value={state}>
<DispatchContext.Provider value={dispatch}>
<ActionsContext.Provider value={boundActions}>
{children}
</ActionsContext.Provider>
</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 = { dispatch, ...props, ...mapped };
return <MemoComponent {...nextProps} />;
}
return Connected;
};
}
// steal from https://github.com/reduxjs/redux/blob/master/src/bindActionCreators.ts
function bindAction(action, dispatch) {
return function (...args) {
return dispatch(action.apply(this, args));
};
}
function bindActions(actions, dispatch) {
const boundActions = {};
for (const key in actions) {
const action = actions[key];
if (typeof action === 'function') {
boundActions[key] = bindAction(action, dispatch);
} else if (typeof action === 'object') {
boundActions[key] = bindActions(action, dispatch);
}
}
return boundActions;
}
|
