diff options
| author | Haishan <[email protected]> | 2020-10-31 18:18:04 +0800 |
|---|---|---|
| committer | Haishan <[email protected]> | 2020-11-01 17:42:52 +0800 |
| commit | ff1a39d04e53b428e34d46c55ecd6689189b5443 (patch) | |
| tree | 94a60abe3d28a1d729b877356bdd38d75ce655a5 /src/components/StateProvider.js | |
| parent | e62c9165481ef12ee2310dee1c32f890b3fe4b78 (diff) | |
chore: run ts-migrate
Diffstat (limited to 'src/components/StateProvider.js')
| -rw-r--r-- | src/components/StateProvider.js | 112 |
1 files changed, 0 insertions, 112 deletions
diff --git a/src/components/StateProvider.js b/src/components/StateProvider.js deleted file mode 100644 index e905d98..0000000 --- a/src/components/StateProvider.js +++ /dev/null @@ -1,112 +0,0 @@ -import produce, * as immer from 'immer'; -import React from 'react'; - -// in logs store we update logs in place -// outside of immer produce -// this is just workaround -immer.setAutoFreeze(false); - -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; -} |
