Как правильно набирать простые useReducer и Context-api в машинописи

Question

Я пробую официальный, но простой пример Context-api в качестве менеджера состояний из zeit , и я получаю ошибку этого типа, которая говорит: «Это выражение не вызывается. Тип '{}' не имеет сигнатур вызовов «. когда я пытаюсь вызвать dispatch из useDispatchViewer из-за моего createcontext({}) это просто пустой объект? Что для этого нужно? , Вы не можете оставить его пустым, как пример , иначе машинопись будет кричать на вас.

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);

Answer 1

После интенсивного сеанса поиска в Google я нашел ответ здесь .

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

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