React hook UseContext没有返回正确的值（根据typescript）

Question

I have the following code that receives the dispatch method:

const mapDispatchToProps = (dispatch: React.Dispatch<AppAction>) => ({

});

I use useContext like so;

    const appContext = useContext(AppContext);
    const [state, dispatch] = appContext;

When running mapDispatchToProps(dispatch); however I get the following error:

Error:(28, 24) TS2345: Argument of type '[AppState, Dispatch<AppAction>]' is not assignable to parameter of type 'Dispatch<AppAction>'. Type '[AppState, Dispatch<AppAction>]' provides no match for the signature '(value: AppAction): void'.

It thinks dispatch is still an array… What's going on?

Answer 1

Turns out you have to declare the type for your context as follows:

export const AppContext = React.createContext<[AppState, Dispatch<AppAction>] | null>(null);

Instead of export const AppContext = React.createContext<Array<[AppState, Dispatch<AppAction>]> | null>(null); export const AppContext = React.createContext<Array<[AppState, Dispatch<AppAction>]> | null>(null);