Reactjs 调度redux操作的运行时间很长

我一直在使用react和redux处理一个应用程序。我遇到了一个性能问题，开始做一些挖掘。在做了很多跟踪和计时之后，我注意到了一些我认为不寻常的事情。当使用

useDispatch

钩子分派一个动作时，分派所花费的时间比我想象的要长得多

以下是我测量运行时的方式：

const partialDar={
协调，
displayName:appUser.displayName，
formattedAddress:property.place.formattedAddress，
isCardinal:Boolean（property.cardinal），
propertyId:property.propertyId，
senderId:appUser.userId，
serviceProviderId:appUser.serviceProviderId
};
const startTime=Date.now（）；
调度（startDar（partialDar））
const endTime=Date.now（）；
log（${endTimer startTimer}ms`）；

我希望调度周围的计时器显示

0ms

或

1ms

作为输出，但在测量了一系列不同的动作调度后，测量的时间在

25ms

和

1000ms

之间变化很大

---

此外，实际减速器内的计时器在

1ms

下运行。是什么导致了所有这些额外的开销？

您能分享一些代码示例吗？这并不能告诉我们什么。谁知道testAction中发生了什么神奇的事情：）附加一个Chrome性能跟踪捕获文件可能会有所帮助。另外，请确保您正在针对生产版本而不是开发版本进行任何分析，因为开发版本通常会增加开销。我编辑了这个问题以包含更多信息。您能否共享一些代码示例？这并不能告诉我们什么。谁知道testAction中发生了什么神奇的事情：）附加一个Chrome性能跟踪捕获文件可能会有所帮助。另外，请确保您正在针对生产构建而不是开发构建进行任何评测，因为开发构建通常会增加开销。

import { createSlice } from "@reduxjs/toolkit";
import uuidv4 from "uuid/v4";

import * as constants from "../../../constants";

const patrolModeSlice = createSlice({
  name: "patrolMode",
  initialState: {
    enabled: false,
    options: {
      darsNote: "",
      cooldown: constants.patrols.defaultCooldown,
      includeCardinals: false
    },
    darsInProgress: {
      byPropertyId: {}
    },
    inBoundPropertiesOnCooldown: {
      byId: {}
    }
  },
  reducers: {
    enable: (state, action) => {
      const { darsNote, cooldown, includeCardinals } = action.payload;
      state.enabled = true;
      state.options = {
        darsNote: darsNote ? darsNote : constants.patrols.defaultMessage,
        cooldown,
        includeCardinals
      };
    },
    disable: (state, action) => {
      state.enabled = false;
      state.darsInProgress.byPropertyId = {};
    },
    startDar: (state, action) => {
      const startTime = Date.now();
      const {
        coordinates,
        displayName,
        formattedAddress,
        isCardinal,
        propertyId,
        senderId,
        serviceProviderId
      } = action.payload;
      if (state.enabled && !state.darsInProgress.byPropertyId[propertyId]) {
        state.darsInProgress.byPropertyId[propertyId] = {
          displayName,
          formattedAddress,
          isCardinal,
          notes: state.darsNote
            ? state.darsNote
            : constants.patrols.defaultMessage,
          patrolId: uuidv4(),
          propertyId,
          senderId,
          serviceProviderId,
          startCoordinates: coordinates,
          startTime: Date.now()
        };
      }
      const endTime = Date.now();
      console.log(`reducer ${endTimer-startTimer}ms`);
    },
    endDar: (state, action) => {
      const { propertyId } = action.payload;
      if (state.enabled) {
        delete state.darsInProgress.byPropertyId[propertyId];
      }
    }
  }
});

const { actions, reducer } = patrolModeSlice;

export const { disable, enable, endDar, startDar } = actions;

export default reducer;

export const selectEnabled = state => state.patrolMode.enabled;
export const selectOptions = state => state.patrolMode.options;
export const selectDarsInProgress = state => state.patrolMode.darsInProgress;