javascript - 为什么useReducer的分派会导致重新渲染？

假设我实现了一个简单的全局加载状态，如下所示：

// hooks/useLoading.js
import React, { createContext, useContext, useReducer } from 'react';

const Context = createContext();

const { Provider } = Context;

const initialState = {
  isLoading: false,
};

function reducer(state, action) {
  switch (action.type) {
    case 'SET_LOADING_ON': {
      return {
        ...state,
        isLoading: true,
      };
    }
    case 'SET_LOADING_OFF': {
      return {
        ...state,
        isLoading: false,
      };
    }
  }
}

export const actionCreators = {
  setLoadingOn: () => ({
    type: 'SET_LOADING_ON',
  }),
  setLoadingOff: () => ({
    type: 'SET_LOADING_OFF',
  }),
};

export const LoadingProvider = ({ children }) => {
  const [{ isLoading }, dispatch] = useReducer(reducer, initialState);
  return <Provider value={{ isLoading, dispatch }}>{children}</Provider>;
};

export default () => useContext(Context);

然后假设我有一个使加载状态发生变化但从不消耗它的组件，如下所示：

import React from 'react';
import useLoading, { actionCreators } from 'hooks/useLoading';

export default () => {
  const { dispatch } = useLoading();
  dispatch(actionCreators.setLoadingOn();
  doSomethingAsync().then(() => dispatch(actionCreators.setLoadingOff()))
  return <React.Fragment />;
};

根据useReducer文档，调度具有稳定的身份。我的解释是，当组件从useReducer中提取调度时，与该调度相关的状态更改时，它将不会重新渲染，因为对调度的引用将始终相同。基本上，分派可以“视为静态值”。

但是，当运行此代码时，该行将dispatch(actionCreators.setLoadingOn())触发对全局状态的更新，并且该useLoading钩子将再次运行dispatch(actionCreators.setLoadingOn()) （无限重新渲染-_-）

我不是正确理解useReducer吗？还是我正在做的其他事情可能导致无限重新渲染？