UseContext.tsx

type DarumaContextType = {
  state: WishState,
  dispatch: React.Dispatch<any>,
};

const DarumaContext = React.createContext({} as DarumaContextType);

const reducer = (state: WishState, action: any) => {
  switch (action.type) {
    case Actions.PAINT:
      return forward(state);
    case Actions.UNDO:
      return backward(state);
    default:
      throw new Error();
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, WishState.PENDING);
  
  return (
    <DarumaContext.Provider value={{ state, dispatch }}>
      <Daruma />
      <Buttons />
    </DarumaContext.Provider>
  );
}