How to correctly type a simple useReducer and Context-api in typescript

Question

Im trying out an official yet simple example of Context-api as state manager from zeit and Im getting this type error that says "This expression is not callable. Type '{}' has no call signatures." when I try to call dispatch from useDispatchViewer because of my createcontext({}) is just an empty object? What does it need then? . You cant leave it empty like the example or typescript will yell at you.

import { Reducer, createContext, useReducer, FC, useContext } from "react";

import { Viewer } from "../generated/graphql";

const ViewerContext = createContext({});
const DispatchContext = createContext({});

export enum ActionType {
  setViewer = "SET_VIEWER",
  getViewer = "GET_VIEWER"
}

export const initialViewer: Viewer = {
  name: null,
  image: null,
  email: null
};

export const viewerReducer: Reducer<Viewer, any> = (viewer, action) => {
  switch (action.type) {
    case ActionType.setViewer:
      return action.payload;
    case ActionType.getViewer:
      return viewer;
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
};

export const ViewerProvider: FC = ({ children }) => {
  const [viewer, dispatch] = useReducer(viewerReducer, initialViewer);
  return (
    <DispatchContext.Provider value={dispatch}>
      <ViewerContext.Provider value={viewer}>{children}</ViewerContext.Provider>
    </DispatchContext.Provider>
  );
};

export const useViewer = () => useContext(ViewerContext);
export const useDispatchViewer = () => useContext(DispatchContext);

nymhays nymhays · Accepted Answer · 2020-03-16T03:41:33

After an intense session of googling , I found the answer here.

export type Action =
  | { type: "SET_VIEWER"; payload: any };

const ViewerContext = createContext(initialViewer);
const DispatchContext = createContext((() => {}) as Dispatch<Action>);

How to correctly type a simple useReducer and Context-api in typescript

1 Answers