react的useContext简单示例

import React, { createContext, useContext, useReducer } from 'react';


interface InitStateType {
    mapType: string;
}

const initState: InitStateType = {
    mapType: '3D',
};

interface ContextType {
    state: InitStateType,
    dispatch: React.Dispatch<{ type: string; data: InitStateType }>,
}

let MapContext = createContext<ContextType>({ state: initState, dispatch: () => { } });

const reducer = (state: InitStateType, action: { type: string, data: InitStateType }) => {
    switch (action.type) {
        case 'changeType':
            return { ...state, ...action.data };
        default:
            return { ...state };
    }
};

const MapProvider = (props: { children: React.ReactChild; }) => {
    const [state, dispatch] = useReducer(reducer, initState);
    return (


        <MapContext.Provider value={{ state, dispatch }}>
            {props.children}
        </MapContext.Provider>
    );
};

export const usePageContext = () => {
    const context = useContext(MapContext);
    if (!context) {
        throw ('只能在函数组件中使用')
    }
    return { ...context }
}

export { MapContext, MapProvider };