使用Redux.js / Toolkit时如何实现乐观更新

Question

我的reducer文件在下面

const slice = createSlice({
  name: "hotels",
  initialState: {
    list: [],
    loading: false,
    lastFetch: null,
  },
  reducers: {
    hotelsRequested: (hotels) => {
      hotels.loading = true;
    },
    hotelsRequestFailed: (hotels) => {
      hotels.loading = false;
    },
    hotelsReceived: (hotels, action) => {
      hotels.list = action.payload;
      hotels.loading = false;
      hotels.lastFetch = Date.now();
    },
    hotelEnabled: (hotels, action) => {
      const { slug } = action.payload;
      const index = hotels.list.findIndex((hotel) => hotel.slug === slug);
      hotels.list[index].active = true;
    },
  },
});

export const {
  hotelsReceived,
  hotelsRequestFailed,
  hotelsRequested,
  hotelEnabled,
} = slice.actions;
export default slice.reducer;

//Action creators
export const loadHotels = () => (dispatch, getState) => {
  const { lastFetch } = getState().entities.hotels;
  const diffInMinutes = moment().diff(lastFetch, "minutes");
  if (diffInMinutes < 10) return;
  dispatch(
    hotelApiCallBegan({
      url: hotelUrl,
      onStart: hotelsRequested.type,
      onSuccess: hotelsReceived.type,
      onError: hotelsRequestFailed.type,
    })
  );
};

export const enableHotel = (slug) =>
  hotelApiCallBegan(
    {
      url: `${hotelUrl}${slug}/partial-update/`,
      method: "put",
      data: { active: true },
      onSuccess: hotelEnabled.type,
    },
    console.log(slug)
  );

我的api请求中间件功能如下

export const hotelsApi = ({ dispatch }) => (next) => async (action) => {
  if (action.type !== actions.hotelApiCallBegan.type) return next(action);

  const {
    onStart,
    onSuccess,
    onError,
    url,
    method,
    data,
    redirect,
  } = action.payload;

  if (onStart) dispatch({ type: onStart });

  next(action);
  try {
    const response = await axiosInstance.request({
      baseURL,
      url,
      method,
      data,
      redirect,
    });

    //General
    dispatch(actions.hotelApiCallSuccess(response.data));
    //Specific
    if (onSuccess) dispatch({ type: onSuccess, payload: response.data });
  } catch (error) {
    //general error
    dispatch(actions.hotelApiCallFailed(error.message));
    console.log(error.message);
    //Specific error
    if (onError) dispatch({ type: onError, payload: error.message });
    console.log(error.message);
  }
};

任何人都可以向我指出如何向此代码添加乐观更新减少器的正确方向。当前，在用户界面上点击启用按钮时，在更新用户界面之前可能会有一秒钟的延迟。也许是问题所在，我是否要创建另一个中间件功能来处理乐观更新？如果是，我该怎么做？谢谢