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
|
import { produce, setAutoFreeze } from 'immer';
import React from 'react';
// in logs store we update logs in place
// outside of immer produce
// this is just workaround
setAutoFreeze(false);
const { createContext, memo, useMemo, useRef, useEffect, useCallback, useContext, useState } =
React;
export const immer = { produce, setAutoFreeze };
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 (import.meta.env.DEV) {
(window as any).getState2 = getState;
}
}, [getState]);
const dispatch = useCallback(
(actionId: string | ((a: any, b: any) => any), fn: (s: any) => void) => {
if (typeof actionId === 'function') return actionId(dispatch, getState);
const stateNext = produce(getState(), fn);
if (stateNext !== stateRef.current) {
if (import.meta.env.DEV) {
// 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: any) {
return (Component: any) => {
const MemoComponent = memo(Component);
function Connected(props: any) {
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: any, dispatch: any) {
return function (...args: any[]) {
return dispatch(action(...args));
};
}
function bindActions(actions: any, dispatch: any) {
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;
}
|
