要跟踪应用的工作时间，并在每个请求中访问此值，而不会导致每秒重新渲染，您可以使用Redux和独立计时器的组合，该计时器独立于React的渲染周期更新时间。
以下是如何实现此功能的分步指南：
1.设置您的Redux商店：使用Redux Toolkit创建Redux商店来管理应用的工作时间。
1.创建单独的计时器：使用JavaScript的setInterval函数创建一个计时器，每秒更新应用的工作时间。这个计时器将独立于React的渲染周期，因此它不会触发组件中的重新渲染。
1.使用Redux中间件：实现一个Redux中间件，拦截你的API请求，并将当前工作时间作为头或参数添加到每个请求中。
下面是一个示例实现：
步骤1：设置Redux商店

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const timeSlice = createSlice({
  name: 'time',
  initialState: 0, // Initial value is set to 0, update this value with the time fetched from the server at the start of your app
  reducers: {
    updateTime: (state, action) => {
      return action.payload;
    },
  },
});

export const { updateTime } = timeSlice.actions;

const store = configureStore({
  reducer: {
    time: timeSlice.reducer,
    // other reducers...
  },
});

export default store;

字符串
步骤2：创建单独的计时器

// Timer.js
import { useDispatch } from 'react-redux';
import { updateTime } from './store';

const Timer = () => {
  const dispatch = useDispatch();

  const updateAppTime = () => {
    const currentTime = Date.now(); // Get the current time from the server or an accurate time source
    dispatch(updateTime(currentTime));
  };

  // Update the app time every second
  setInterval(updateAppTime, 1000);

  return null; // We don't need to render anything, so return null
};

export default Timer;

型
步骤3：使用Redux中间件将应用时间添加到每个API请求
您可以使用Redux中间件，特别是redux-toolkit/query中间件，拦截每个API请求并将应用程序的工作时间添加到其中。

// api.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { useSelector } from 'react-redux';

const baseUrl = 'https://api.example.com'; // Replace with your API base URL

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    // Define your API endpoints here
    // Example:
    getUsers: builder.query({
      query: () => '/users',
      transformResponse: (response) => response.data,
    }),
  }),
  // Add middleware to intercept API requests and modify headers or parameters
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat((api) => (next) => (action) => {
      const appTime = useSelector((state) => state.time);
      const updatedAction = {
        ...action,
        headers: {
          ...action.headers,
          'X-App-Time': appTime, // Add the app time as a custom header
        },
        // You can also add the app time as a parameter if required
        // params: {
        //   ...action.params,
        //   appTime,
        // },
      };
      return next(updatedAction);
    }),
});

export const { useGetUsersQuery } = api;

型
最后，使用Redux商店提供程序 Package 整个应用，并包含Timer组件以启动应用时间跟踪：

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Timer from './Timer';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <Timer />
    <App />
  </Provider>,
  document.getElementById('root')
);

型
通过此设置，应用的工作时间将每秒独立更新，您可以使用Redux中间件在任何请求中访问此值，而不会导致组件中不必要的重新渲染。