refactor: 缓存管理与redux增加好友

shared/api/socket.ts

@@ -44,7 +44,7 @@ export class AppSocket {
     });
   }
 
-  listen(eventName: string, callback: (data: unknown) => void) {
+  listen<T>(eventName: string, callback: (data: T) => void) {
     this.socket.on(`notify:${eventName}`, callback);
   }
 }

shared/cache/Provider.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { QueryClientProvider } from 'react-query';
+import { queryClient } from './';
+
+/**
+ * 缓存上下文
+ */
+export const CacheProvider: React.FC = React.memo((props) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {props.children}
+    </QueryClientProvider>
+  );
+});
+CacheProvider.displayName = 'CacheProvider';

shared/cache/cache.ts

@@ -0,0 +1,20 @@
+import { fetchUserInfo, UserBaseInfo } from '../model/user';
+import { queryClient } from './index';
+
+function buildCacheFactory<T>(
+  scope: string,
+  fetcher: (id: string) => Promise<T>
+) {
+  return async (id: string): Promise<T> => {
+    const data = await queryClient.fetchQuery([scope, id], () => fetcher(id));
+    return data;
+  };
+}
+
+/**
+ * 获取缓存的用户信息
+ */
+export const getCachedUserInfo = buildCacheFactory<UserBaseInfo>(
+  'user',
+  fetchUserInfo
+);

shared/cache/index.ts

@@ -0,0 +1,5 @@
+import { QueryClient } from 'react-query';
+
+const queryClient = new QueryClient();
+
+export { queryClient };

shared/cache/useCache.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 import { fetchUserInfo, UserBaseInfo } from '../model/user';
 
-function buildCacheFactory<T>(
+function buildUseCacheFactory<T>(
   scope: string,
   fetcher: (id: string) => Promise<T>
 ) {
@@ -11,7 +11,7 @@ function buildCacheFactory<T>(
   };
 }
 
-export const useUserInfo = buildCacheFactory<UserBaseInfo>(
+export const useCachedUserInfo = buildUseCacheFactory<UserBaseInfo>(
   'user',
   fetchUserInfo
 );

shared/components/Provider.tsx

@@ -1,13 +1,7 @@
 import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { CacheProvider } from '../cache/Provider';
-
-const queryClient = new QueryClient();
 
 export const PawProvider: React.FC = React.memo((props) => {
-  return (
+  return <CacheProvider>{props.children}</CacheProvider>;
-    <QueryClientProvider client={queryClient}>
-      {props.children}
-    </QueryClientProvider>
-  );
 });
 PawProvider.displayName = 'PawProvider';

shared/index.tsx

@@ -3,6 +3,10 @@ export { buildStorage } from './api/buildStorage';
 export { createSocket } from './api/socket';
 export type { AppSocket } from './api/socket';
 
+// cache
+export { getCachedUserInfo } from './cache/cache';
+export { useCachedUserInfo } from './cache/useCache';
+
 // components
 export { FastForm } from './components/FastForm/index';
 export { CustomField } from './components/FastForm/CustomField';
@@ -23,7 +27,6 @@ export { t, setLanguage, useTranslation } from './i18n';
 export { useAsync } from './hooks/useAsync';
 export { useAsyncFn } from './hooks/useAsyncFn';
 export { useAsyncRequest } from './hooks/useAsyncRequest';
-export { useUserInfo } from './hooks/useCache';
 export { useMountedState } from './hooks/useMountedState';
 export { useRafState } from './hooks/useRafState';
 

shared/redux/setup.ts

@@ -3,6 +3,7 @@ import type { AppSocket } from '../api/socket';
 import { userActions } from './slices';
 import type { UserBaseInfo } from '../model/user';
 import type { FriendRequest } from '../model/friend';
+import { getCachedUserInfo } from '../cache/cache';
 
 /**
  * 初始化Redux 上下文
@@ -17,4 +18,14 @@ export function setupRedux(socket: AppSocket, store: AppStore) {
   socket.request<FriendRequest[]>('friend.request.allRelated').then((data) => {
     store.dispatch(userActions.setFriendRequests(data));
   });
+
+  socket.listen<{ userId: string }>('friend.add', ({ userId }) => {
+    if (typeof userId !== 'string') {
+      console.error('错误的信息', userId);
+      return;
+    }
+    getCachedUserInfo(userId).then((info) => {
+      store.dispatch(userActions.appendFriend(info));
+    });
+  });
 }

shared/redux/slices/user.ts

@@ -26,6 +26,13 @@ const userSlice = createSlice({
     setFriendRequests(state, action: PayloadAction<FriendRequest[]>) {
       state.friendRequests = action.payload;
     },
+    appendFriend(state, action: PayloadAction<UserBaseInfo>) {
+      if (state.friends.some(({ _id }) => _id === action.payload._id)) {
+        return;
+      }
+
+      state.friends.push(action.payload);
+    },
   },
 });
 

web/src/components/UserListItem.tsx

@@ -3,7 +3,7 @@ import { Avatar } from './Avatar';
 import _isNil from 'lodash/isNil';
 import { Skeleton, Space } from 'antd';
 // import { openUserProfile } from './modals/UserProfile';
-import { useUserInfo } from 'pawchat-shared';
+import { useCachedUserInfo } from 'pawchat-shared';
 
 // const UserAvatar = styled(Avatar)`
 //   cursor: pointer !important;
@@ -21,7 +21,7 @@ interface UserListItemProps {
 }
 export const UserListItem: React.FC<UserListItemProps> = React.memo((props) => {
   const { actions = [] } = props;
-  const userInfo = useUserInfo(props.userId);
+  const userInfo = useCachedUserInfo(props.userId);
   const userName = userInfo.nickname;
 
   const handleClick = useCallback(() => {