next.js 如何在没有客户端时间的情况下跟踪所有页面的应用程序工作?

e0uiprwp  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(130)

我想跟踪应用程序的工作时间,这个变量可以为我所有的组件,我知道使用商店的解决方案,但在这种情况下,我将有每一秒重新渲染时,这个变量被更新,所以,你能为这种情况提供一些解决方案吗?我需要这个应用程序的时间在我的应用程序中的所有请求,但我不能使用Date.now()cuse这个解决方案的基础上,客户端的时间,有可能是错误的,我的目标是得到当前的时间,当我提出请求。从一开始,我的应用程序就从另一个服务器获取时间,我想每秒递增这个值。我也可以在每个请求中访问这个值,对于请求,我使用redux toolkit query。

thigvfpy

thigvfpy1#

要跟踪应用的工作时间,并在每个请求中访问此值,而不会导致每秒重新渲染,您可以使用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中间件在任何请求中访问此值,而不会导致组件中不必要的重新渲染。

相关问题