refactor: 将全局设置参数移动到redux中,并将redux的api接口改为全局定义

为此,需要将退出登录操作改为刷新页面以清理上下文
pull/70/head
moonrailgun 2 years ago
parent 6be47e1f57
commit 4d554df237

@ -210,7 +210,7 @@ export {
} from './redux/slices'; } from './redux/slices';
export type { ChatConverseState } from './redux/slices/chat'; export type { ChatConverseState } from './redux/slices/chat';
export { setupRedux } from './redux/setup'; export { setupRedux } from './redux/setup';
export { createStore, ReduxProvider } from './redux/store'; export { reduxStore, ReduxProvider } from './redux/store';
export type { AppStore, AppState, AppDispatch } from './redux/store'; export type { AppStore, AppState, AppDispatch } from './redux/store';
// utils // utils

@ -1,4 +1,7 @@
import { request } from '../api/request'; import { request } from '../api/request';
import { globalActions } from '../redux/slices';
import { defaultGlobalConfig } from '../redux/slices/global';
import { reduxStore } from '../redux/store';
/** /**
* *
@ -9,26 +12,25 @@ export interface GlobalConfig {
* 1m * 1m
*/ */
uploadFileLimit: number; uploadFileLimit: number;
/**
*
*/
emailVerification: boolean;
} }
let globalConfig = { export function getGlobalConfig(): GlobalConfig {
uploadFileLimit: 1 * 1024 * 1024, return reduxStore.getState().global.config;
emailVerification: false, // 是否在注册时校验邮箱
};
export function getGlobalConfig() {
return {
...globalConfig,
};
} }
export async function fetchGlobalClientConfig(): Promise<GlobalConfig> { export async function fetchGlobalClientConfig(): Promise<GlobalConfig> {
const { data: config } = await request.get('/api/config/client'); const { data: config } = await request.get('/api/config/client');
globalConfig = { reduxStore.dispatch(
...globalConfig, globalActions.setGlobalConfig({
...config, ...defaultGlobalConfig,
}; ...config,
})
);
return config; return config;
} }

@ -1,4 +1,10 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { GlobalConfig } from '../../model/config';
export const defaultGlobalConfig: GlobalConfig = {
uploadFileLimit: 1 * 1024 * 1024,
emailVerification: false,
};
export interface GlobalState { export interface GlobalState {
/** /**
@ -6,11 +12,13 @@ export interface GlobalState {
*/ */
networkStatus: 'initial' | 'connected' | 'reconnecting' | 'disconnected'; networkStatus: 'initial' | 'connected' | 'reconnecting' | 'disconnected';
reconnectNum: number; reconnectNum: number;
config: GlobalConfig;
} }
const initialState: GlobalState = { const initialState: GlobalState = {
networkStatus: 'initial', networkStatus: 'initial',
reconnectNum: 0, reconnectNum: 0,
config: defaultGlobalConfig,
}; };
const globalSlice = createSlice({ const globalSlice = createSlice({
@ -26,6 +34,9 @@ const globalSlice = createSlice({
incReconnectNum(state) { incReconnectNum(state) {
state.reconnectNum += 1; state.reconnectNum += 1;
}, },
setGlobalConfig(state, action: PayloadAction<GlobalConfig>) {
state.config = action.payload;
},
}, },
}); });

@ -1,7 +1,7 @@
import { configureStore } from '@reduxjs/toolkit'; import { configureStore } from '@reduxjs/toolkit';
import { appReducer } from './slices'; import { appReducer } from './slices';
export function createStore() { function createStore() {
const store = configureStore({ const store = configureStore({
reducer: appReducer, reducer: appReducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware(), middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
@ -11,6 +11,8 @@ export function createStore() {
return store; return store;
} }
export const reduxStore = createStore();
export type AppStore = ReturnType<typeof createStore>; export type AppStore = ReturnType<typeof createStore>;
export type AppState = ReturnType<AppStore['getState']>; export type AppState = ReturnType<AppStore['getState']>;
export type AppDispatch = AppStore['dispatch']; export type AppDispatch = AppStore['dispatch'];

@ -82,9 +82,8 @@ export const SettingsAccount: React.FC = React.memo(() => {
// 登出 // 登出
const handleLogout = useCallback(async () => { const handleLogout = useCallback(async () => {
await setUserJWT(null); await setUserJWT(null);
getGlobalSocket()?.disconnect();
setGlobalUserLoginInfo(null); window.location.replace('/'); // 重载页面以清空所有状态
navigate('/');
}, []); }, []);
if (!userInfo) { if (!userInfo) {

@ -1,12 +1,12 @@
import { import {
createSocket, createSocket,
createStore,
setupRedux, setupRedux,
useAsync, useAsync,
userActions, userActions,
t, t,
ReduxProvider, ReduxProvider,
UserLoginInfo, UserLoginInfo,
reduxStore,
} from 'tailchat-shared'; } from 'tailchat-shared';
import React, { PropsWithChildren } from 'react'; import React, { PropsWithChildren } from 'react';
import { LoadingSpinner } from '@/components/LoadingSpinner'; import { LoadingSpinner } from '@/components/LoadingSpinner';
@ -41,7 +41,7 @@ function useAppState() {
// 到这里 userLoginInfo 必定存在 // 到这里 userLoginInfo 必定存在
// 创建Redux store // 创建Redux store
const store = createStore(); const store = reduxStore;
store.dispatch(userActions.setUserInfo(userLoginInfo)); store.dispatch(userActions.setUserInfo(userLoginInfo));
setGlobalStore(store); setGlobalStore(store);

Loading…
Cancel
Save