mirror of https://github.com/msgbyte/tailchat
refactor: 引入react-query, 替代原来的自己实现的reduxHookCacheFactory
moonrailgun
4 years ago
parent
d7e8b305f9
commit
5ec998856b
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { QueryClient, QueryClientProvider } from 'react-query';
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
export const PawProvider: React.FC = React.memo((props) => {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{props.children}
|
||||
</QueryClientProvider>
|
||||
);
|
||||
});
|
||||
PawProvider.displayName = 'PawProvider';
|
||||
@ -0,0 +1,17 @@
|
||||
import { useQuery } from 'react-query';
|
||||
import { fetchUserInfo, UserBaseInfo } from '../model/user';
|
||||
|
||||
function buildCacheFactory<T>(
|
||||
scope: string,
|
||||
fetcher: (id: string) => Promise<T>
|
||||
) {
|
||||
return (id: string): T | Record<string, never> => {
|
||||
const { data } = useQuery([scope, id], () => fetcher(id));
|
||||
return data ?? {};
|
||||
};
|
||||
}
|
||||
|
||||
export const useUserInfo = buildCacheFactory<UserBaseInfo>(
|
||||
'user',
|
||||
fetchUserInfo
|
||||
);
|
||||
@ -1,141 +0,0 @@
|
||||
import _get from 'lodash/get';
|
||||
import _set from 'lodash/set';
|
||||
import _isNil from 'lodash/isNil';
|
||||
import { useEffect, useMemo, useRef } from 'react';
|
||||
import { fetchUserInfo, UserBaseInfo } from '../../model/user';
|
||||
import { cacheActions } from '../slices';
|
||||
import type { CacheKey } from '../slices/cache';
|
||||
import { useAppDispatch, useAppSelector } from './useAppSelector';
|
||||
|
||||
// 检查是否需要跳过处理
|
||||
const isSkipId = (id: string) =>
|
||||
_isNil(id) ||
|
||||
id === '' ||
|
||||
typeof id !== 'string' ||
|
||||
id.toString().startsWith('_');
|
||||
|
||||
interface CacheHookOptions {
|
||||
forceFetch?: boolean;
|
||||
}
|
||||
|
||||
type GetCacheDataFn = (id: string) => Promise<unknown>;
|
||||
|
||||
function reduxHookCacheFactory<T>(
|
||||
cacheScope: CacheKey,
|
||||
getCacheData: GetCacheDataFn
|
||||
) {
|
||||
const isFetchingDataIdQueue: string[] = []; // 正在请求的id列表
|
||||
|
||||
return function useReduxCache(
|
||||
id: string,
|
||||
options?: CacheHookOptions
|
||||
): Partial<T> {
|
||||
const data = useAppSelector<T>(
|
||||
(state) => _get(state, ['cache', cacheScope, id]) as any
|
||||
);
|
||||
const dispatch = useAppDispatch();
|
||||
const forceFetchRef = useRef(options?.forceFetch ?? false);
|
||||
|
||||
useEffect(() => {
|
||||
if ((_isNil(data) || forceFetchRef.current === true) && !isSkipId(id)) {
|
||||
// 如果没有数据或设置了强制重新获取 且 不是内置的UUID
|
||||
// 从服务端获取缓存信息
|
||||
if (isFetchingDataIdQueue.indexOf(id) === -1) {
|
||||
// 没有正在获取缓存信息
|
||||
console.log(`缓存[${cacheScope}: ${id}]不存在， 自动获取`);
|
||||
|
||||
getCacheData(id).then((data) => {
|
||||
// 从列表中移除
|
||||
const index = isFetchingDataIdQueue.indexOf(id);
|
||||
if (index !== -1) {
|
||||
isFetchingDataIdQueue.splice(index, 1);
|
||||
}
|
||||
forceFetchRef.current = false; // 不论怎么样都置为false 表示已经获取过了
|
||||
|
||||
dispatch(
|
||||
cacheActions.setCache({
|
||||
scope: cacheScope,
|
||||
id,
|
||||
data,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
isFetchingDataIdQueue.push(id);
|
||||
}
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return data ?? {};
|
||||
};
|
||||
}
|
||||
|
||||
export const useCachedUserInfo = reduxHookCacheFactory<UserBaseInfo>(
|
||||
'user',
|
||||
(userId) => fetchUserInfo(userId)
|
||||
);
|
||||
|
||||
/**
|
||||
* redux 的批量获取hooks的构造器
|
||||
* 用于列表
|
||||
* @param cacheScope 缓存的域
|
||||
* @param getCacheDispatch 请求缓存的dispatch
|
||||
*/
|
||||
function reduxHookCacheListFactory<T>(
|
||||
cacheScope: CacheKey,
|
||||
getCacheData: GetCacheDataFn
|
||||
) {
|
||||
const isFetchingDataIdQueue: string[] = []; // 正在请求的UUID列表
|
||||
|
||||
return function hook<R extends Record<string, T> = Record<string, T>>(
|
||||
idList: string[]
|
||||
): R {
|
||||
const cacheList = useAppSelector<R>(
|
||||
(state) => _get(state, ['cache', cacheScope]) as any
|
||||
);
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const resMap = useMemo<R>(() => {
|
||||
const map = {} as R;
|
||||
for (const id of idList) {
|
||||
if (_isNil(cacheList[id]) && !isSkipId(id)) {
|
||||
// 如果没有数据则请求数据
|
||||
// 从服务端获取缓存信息
|
||||
if (isFetchingDataIdQueue.indexOf(id) === -1) {
|
||||
// 没有正在获取缓存信息
|
||||
console.log(`缓存[${cacheScope}: ${id}]不存在， 自动获取`);
|
||||
getCacheData(id).then((data) => {
|
||||
// 从列表中移除
|
||||
const index = isFetchingDataIdQueue.indexOf(id);
|
||||
if (index !== -1) {
|
||||
isFetchingDataIdQueue.splice(index, 1);
|
||||
}
|
||||
|
||||
dispatch(
|
||||
cacheActions.setCache({
|
||||
scope: cacheScope,
|
||||
id,
|
||||
data,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
isFetchingDataIdQueue.push(id);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// 加入返回的map中
|
||||
_set(map, id, cacheList[id]);
|
||||
}
|
||||
|
||||
return map;
|
||||
}, [cacheList, idList.join(',')]);
|
||||
|
||||
return resMap;
|
||||
};
|
||||
}
|
||||
export const useCachedUserInfoList = reduxHookCacheListFactory<UserBaseInfo>(
|
||||
'user',
|
||||
(userId) => fetchUserInfo(userId)
|
||||
);
|
||||
@ -1,32 +0,0 @@
|
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
import type { UserBaseInfo } from '../../model/user';
|
||||
import _set from 'lodash/set';
|
||||
|
||||
interface CacheState {
|
||||
user: Record<string, UserBaseInfo>;
|
||||
}
|
||||
|
||||
export type CacheKey = keyof CacheState;
|
||||
|
||||
const initialState: CacheState = { user: {} };
|
||||
|
||||
const cacheSlice = createSlice({
|
||||
name: 'cache',
|
||||
initialState,
|
||||
reducers: {
|
||||
setCache(
|
||||
state,
|
||||
action: PayloadAction<{
|
||||
scope: CacheKey;
|
||||
id: string;
|
||||
data: unknown;
|
||||
}>
|
||||
) {
|
||||
const { scope, id, data } = action.payload;
|
||||
_set(state, [scope, id], data);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const cacheActions = cacheSlice.actions;
|
||||
export const cacheReducer = cacheSlice.reducer;
|
||||
@ -1,13 +1,10 @@
|
||||
import { combineReducers } from '@reduxjs/toolkit';
|
||||
import { cacheReducer } from './cache';
|
||||
import { userReducer } from './user';
|
||||
|
||||
export const appReducer = combineReducers({
|
||||
cache: cacheReducer,
|
||||
user: userReducer,
|
||||
});
|
||||
|
||||
export type AppState = ReturnType<typeof appReducer>;
|
||||
|
||||
export { cacheActions } from './cache';
|
||||
export { userActions } from './user';
|
||||
|
||||
Loading…
Reference in New Issue