text: import React from "react";
  
  const CountContext = React.createContext();
  
  function countReducer(state, action) {
    switch (action.type) {
      case "INCREMENT": {
        return { count: state.count + 1 };
      }
      default: {
        throw new Error(`Unsupported action type: ${action.type}`);
      }
    }
  }
  
  function CountProvider(props) {
    const [state, dispatch] = React.useReducer(countReducer, { count: 0 });
    const value = React.useMemo(() => [state, dispatch], [state]);
    return <CountContext.Provider value={value} {...props} />;
  }
  
  function useCount() {
    const context = React.useContext(CountContext);
    if (!context) {
      throw new Error(`useCount must be used within a CountProvider`);
    }
    const [state, dispatch] = context;
  
    const increment = () => dispatch({ type: "INCREMENT" });
    return {
      state,
      dispatch,
      increment,
    };
  }
  
  function Counter() {
    const {
      state: { count },
      increment,
    } = useCount();
    return <button onClick={increment}>{count}</button>;
  }
  
  function CountDisplay() {
    const {
      state: { count },
    } = useCount();
    return <div>The current counter count is {count}</div>;
  }
  
  function ContextWithReducerCounter() {
    return (
      <div>
        <CountProvider>
          <CountDisplay />
          <Counter />
        </CountProvider>
      </div>
    );
  }
  
  export default ContextWithReducerCounter;
  