useContext 中的调度在 handleClick 上不起作用

Question

I am trying to do a simple dispatch to the reducer, however I am not sure on why it's not updating or triggering changes to the context state.

Below is my Provider code along with it's custom hook.

import React, { FC, Dispatch, createContext, useReducer, useContext, ReactNode } from 'react';

export const SET_SHOW = "SET_SHOW";

interface SetShow {
    type: typeof SET_SHOW;
    show: boolean;
}

type AppActionTypes = SetShow;

interface AppState {
    show: boolean;
}

interface ContextType {
    state: AppState;
    dispatch: Dispatch<AppActionTypes>;
}


const INITIAL_STATE = {
    show: false
}

const AppContext = createContext<ContextType>(
    { 
        state: INITIAL_STATE, 
        dispatch: () => null 
    }
);

const AppReducer = (state: AppState, action: AppActionTypes) => {
    switch(action.type){
        case SET_SHOW: {
            return {
                show: action.show
            }
        }
        default:
            throw new Error("Action is invalid");
    }
};

export const AppProvider: FC = (props: ReactNode) => {
    const initialState = INITIAL_STATE;
    const [ state, dispatch ] = useReducer(AppReducer, initialState);

    return <AppContext.Provider value={{state, dispatch }} {...props} />;
};

export const useProvider = (): ContextType => {
    const context = useContext(AppContext);

    if(!context){
        throw new Error("useProvider must be used within AppContext");
    }

    const {state, dispatch} = context;

    return { 
        state, dispatch
    };
};

And below is my app component

import React, { FC } from 'react';
import './App.css';
import { AppProvider, useProvider, SET_SHOW } from './hooks/useProvider';


const App: FC = (): JSX.Element => {
  const { state, dispatch } = useProvider();

  const handleClick = () =>{
    dispatch({
      type: SET_SHOW,
      show: !state.show
    });
    console.log(state.show);
  };

  return (
    <AppProvider>
      <div className="App">
          { state.show && "Hello World!" }
          <button onClick={handleClick}>
            Show message!
          </button>
      </div>
    </AppProvider>
  );
};

export default App;

I already tried putting an breakpoints on the reducer but somehow it still doesn't trigger the dispatch call.

Answer 1

There are 2 problems here.

1. The AppProvider should be a parent of App . This way it can fully access the context.

const rootElement = document.getElementById("root");
render(
  <AppProvider>
    <App />
  </AppProvider>,
  rootElement
);

2. dispatch is changing the state async so console.log just after dispatch logs the old value. You should "watch" the change using useEffect .

React.useEffect(() => {
  console.log("effect", state.show);
}, [state.show]);

A working demo: https://codesandbox.io/s/peaceful-blackwell-ohd0y?file=/src/index.tsx