perf(app): 添加登录状态检查并优化性能
- 在多个页面添加 isLoggedIn 检查,防止未登录时进行不必要的数据获取 - 使用 React.memo 和 useMemo 优化个人页面徽章渲染性能 - 为 badges API 添加节流机制,避免频繁请求 - 优化图片缓存策略和字符串处理 - 移除调试日志并改进推送通知的认证检查
This commit is contained in:
@@ -2,6 +2,7 @@ import type { BadgeDto, BadgeRarity } from '@/services/badges';
|
||||
import { getAvailableBadges } from '@/services/badges';
|
||||
import { createAsyncThunk, createSelector, createSlice } from '@reduxjs/toolkit';
|
||||
import dayjs from 'dayjs';
|
||||
import { throttle } from 'lodash';
|
||||
|
||||
import type { RootState } from './index';
|
||||
|
||||
@@ -19,11 +20,20 @@ const initialState: BadgesState = {
|
||||
lastFetched: null,
|
||||
};
|
||||
|
||||
// 创建节流版本的 fetchAvailableBadges 内部函数
|
||||
const throttledFetchAvailableBadges = throttle(
|
||||
async (): Promise<BadgeDto[]> => {
|
||||
return await getAvailableBadges();
|
||||
},
|
||||
2000, // 2秒节流
|
||||
{ leading: true, trailing: false }
|
||||
);
|
||||
|
||||
export const fetchAvailableBadges = createAsyncThunk<BadgeDto[], void, { rejectValue: string }>(
|
||||
'badges/fetchAvailable',
|
||||
async (_, { rejectWithValue }) => {
|
||||
try {
|
||||
return await getAvailableBadges();
|
||||
return await throttledFetchAvailableBadges();
|
||||
} catch (error: any) {
|
||||
const message = error?.message ?? '获取勋章列表失败';
|
||||
return rejectWithValue(message);
|
||||
|
||||
Reference in New Issue
Block a user