无法使用 React useContext 和 useMemo 获取更新状态

Question

我想使用 React 的 useContext 和 useMemo 来获取更新后的值，但是返回的值没有从 initialState 更新。

我写这篇文章的方式有问题吗？

可以在下面找到一个简单的代码和框。

./context/AppContext.js

import React, {
  createContext,
  useCallback,
  useContext,
  useMemo,
  useReducer
} from "react";

export const AppContext = createContext();

export const useAppContext = () => {
  return useContext(AppContext);
};

const initialState = {
  bar: null
};

const SET_APP = "SET_APP";

export const reducer = (state, { type, payload }) => {
  switch (type) {
    case SET_APP:
      const { bar } = payload;
      return {
        ...state,
        bar
      };
    default:
      throw Error(
        `Unexpected action type in ElectionContext reducer: '${type}'.`
      );
  }
};

const AppContextProvider = (props) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const appSetter = useCallback(() => {
    dispatch({ type: SET_APP, payload: { bar: "bar" } });
  }, []);

  return (
    <AppContext.Provider
      value={useMemo(
        () => [
          state,
          {
            appSetter
          }
        ],
        [appSetter]
      )}
    >
      {props.children}
    </AppContext.Provider>
  );
};

export const useAppSetter = () => {
  const [, { appSetter }] = useAppContext();
  return appSetter;
};

export const useAppObj = () => {
  const [state] = useAppContext();
  return state;
};

export default AppContextProvider;

App.js

import "./styles.css";
import { useEffect } from "react";
import { useAppSetter, useAppObj } from "./contexts/AppContext";

export default function App() {
  const appSetter = useAppSetter();
  const { bar } = useAppObj();

  useEffect(() => {
    appSetter();
  });

  const foo = () => {
    console.log(bar);
  };

  return (
    <div className="App">
      <button onClick={foo}>console</button>
    </div>
  );
}

https://codesandbox.io/embed/peaceful-cloud-rn4cs?fontsize=14&hidenavigation=1&theme=dark