reactjs - 增强调度导致身份不稳定

Question

我正在像这样增强 Context 的调度功能：

const augmentDispatch = (
  dispatch: React.Dispatch<Action | ApiAction>,
  state: AppState,
) => (action: Thunk | Action | ApiAction) => {
  if (typeof action === "object" && action.type === CALL_API) {
    return callApi(action as ApiAction, dispatch);
  }

  return action instanceof Function
    ? action(dispatch, state)
    : dispatch(action as Action);
};

它允许我为某些操作触发 API 调用。然后我像这样使用它：

export function App(): JSX.Element {
  const [state, dispatch] = useReducer(rootReducer, defaultState);

  const augmentedDispatch = augmentDispatch(dispatch, state);

  return (
    <GlobalContext.Provider
      value={{ state, dispatch: augmentedDispatch }}
    >

这对事件处理程序很有用，但是当我尝试在以下位置使用它时遇到了无限重新渲染useEffect：

export const EditForm: React.FC = () => {
  const { dispatch, state } = useContext(GlobalContext);

  const dispatchLoadDetails = useCallback(
    () => dispatch(loadDetails()),
    [dispatch],
  );

  useEffect(() => {
    dispatchLoadDetails();
  }, [dispatchLoadDetails]);

  return (
    <Form

我似乎已经通过捕获对增强调度的引用来解决它：

export function App(): JSX.Element {
  const [state, dispatch] = useReducer(rootReducer, defaultState);

  /**
   * Note the usage of useRef here - without it we'd generate a new reference to
   * augmentedDispatch with every call within useEffect, which would cause an
   * indfinite re-render
   */
  const augmentedDispatch = useRef(augmentDispatch(dispatch, state));

  return (
    <GlobalContext.Provider
      value={{ state, dispatch: augmentedDispatch.current }}
    >

这是解决这个问题的最好方法吗？文档表明useRef应该作为最后的手段使用......

标签： reactjsreact-hooksuse-effect