refactor: 将react-redux的代码迁移至redux-toolkit

src/components/NavBar/index.tsx

@@ -20,6 +20,7 @@ import useStorage from '@/utils/useStorage';
 import { generatePermission } from '@/routes';
 import logoImage from '@/public/assets/logo.png';
 import useUser from '@/hooks/user';
+import { updateUserInfo } from '@/store';
 
 function Navbar({ show }: { show: boolean }) {
   const t = useLocale();
@@ -42,15 +43,12 @@ function Navbar({ show }: { show: boolean }) {
   }
 
   useEffect(() => {
-    dispatch({
+    dispatch(updateUserInfo({
-      type: 'update-userInfo',
-      payload: {
       userInfo: {
         ...userInfo,
         permissions: generatePermission(role)
       }
-      }
+    }));
-    });
   }, [role]);
 
   if (!show) {

src/components/Settings/block.tsx

@@ -4,6 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { GlobalState } from '../../store';
 import useLocale from '../../utils/useLocale';
 import styles from './style/block.module.less';
+import { updateSettings } from '@/store';
 
 export interface BlockProps {
   title?: ReactNode;
@@ -34,12 +35,9 @@ export default function Block(props: BlockProps) {
                   onChange={(checked) => {
                     const newSetting = {
                       ...settings,
-                      [option.value]: checked,
+                      [option.value]: checked
                     };
-                    dispatch({
+                    dispatch(updateSettings({ settings: newSetting }));
-                      type: 'update-settings',
-                      payload: { settings: newSetting },
-                    });
                     // set color week
                     if (checked && option.value === 'colorWeek') {
                       document.body.style.filter = 'invert(80%)';
@@ -58,12 +56,9 @@ export default function Block(props: BlockProps) {
                   onChange={(value) => {
                     const newSetting = {
                       ...settings,
-                      [option.value]: value,
+                      [option.value]: value
                     };
-                    dispatch({
+                    dispatch(updateSettings({ settings: newSetting }));
-                      type: 'update-settings',
-                      payload: { settings: newSetting },
-                    });
                   }}
                 />
               )}

src/components/Settings/color.tsx

@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { GlobalState } from '../../store';
 import useLocale from '@/utils/useLocale';
 import styles from './style/color-panel.module.less';
+import { updateSettings } from '@/store';
 
 function ColorPanel() {
   const theme =
@@ -26,13 +27,10 @@ function ColorPanel() {
             color={themeColor}
             onChangeComplete={(color) => {
               const newColor = color.hex;
-              dispatch({
+              dispatch(updateSettings({ settings: { ...settings, themeColor: newColor } }));
-                type: 'update-settings',
-                payload: { settings: { ...settings, themeColor: newColor } },
-              });
               const newList = generate(newColor, {
                 list: true,
-                dark: theme === 'dark',
+                dark: theme === 'dark'
               });
               newList.forEach((l, index) => {
                 const rgbStr = getRgbStr(l);

src/pages/_app.tsx

@@ -3,15 +3,12 @@ import { useRouter } from 'next/router';
 import cookies from 'next-cookies';
 import Head from 'next/head';
 import type { AppProps } from 'next/app';
-import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 import '../style/global.less';
 import { ConfigProvider, Message } from '@arco-design/web-react';
 import zhCN from '@arco-design/web-react/es/locale/zh-CN';
 import enUS from '@arco-design/web-react/es/locale/en-US';
-import axios from 'axios';
 import NProgress from 'nprogress';
-import rootReducer from '../store';
 import { GlobalContext } from '../context';
 import checkLogin from '@/utils/checkLogin';
 import '@/api'; // 全局挂载axios拦截器
@@ -21,8 +18,9 @@ import Layout from './layout';
 import '../mock';
 import { getUserInfo } from '@/api/user';
 import { setSessionUserInfo } from '@/utils/auth';
+import store from '@/store'; // 只导入 store
+import { updateUserInfo } from '@/store'; // 导入 action
 
-const store = createStore(rootReducer);
 
 interface RenderConfig {
   arcoLang?: string;
@@ -51,16 +49,10 @@ export default function MyApp({
   }, [lang]);
 
   async function fetchUserInfo() {
-    store.dispatch({
+    store.dispatch(updateUserInfo({ userLoading: true }));
-      type: 'update-userInfo',
-      payload: { userLoading: true }
-    });
     const res: any = await getUserInfo();
     setSessionUserInfo(res.data);
-    store.dispatch({
+    store.dispatch(updateUserInfo({ userInfo: { ...res.data } }));
-      type: 'update-userInfo',
-      payload: { userInfo: { ...res.data } }
-    });
   }
 
   useEffect(() => {

src/store/index.ts

@@ -1,4 +1,6 @@
+import { createSlice, configureStore } from '@reduxjs/toolkit';
 import defaultSettings from '../settings.json';
+
 export interface GlobalState {
   settings?: typeof defaultSettings;
   userInfo?: {
@@ -16,28 +18,33 @@ export interface GlobalState {
 const initialState: GlobalState = {
   settings: defaultSettings,
   userInfo: {
-    permissions: {},
+    permissions: {}
-  },
+  }
 };
 
-export default function store(state = initialState, action) {
+const globalSlice = createSlice({
-  switch (action.type) {
+  name: 'global',
-    case 'update-settings': {
+  initialState,
-      const { settings } = action.payload;
+  reducers: {
-      return {
+    updateSettings(state, action) {
-        ...state,
+      state.settings = action.payload.settings;
-        settings,
+    },
-      };
+    updateUserInfo(state, action) {
-    }
+      state.userInfo = action.payload.userInfo || initialState.userInfo;
-    case 'update-userInfo': {
+      state.userLoading = action.payload.userLoading;
-      const { userInfo = initialState.userInfo, userLoading } = action.payload;
-      return {
-        ...state,
-        userLoading,
-        userInfo,
-      };
     }
-    default:
-      return state;
   }
-}
+});
+
+// 保持与原来相同的 action creators 导出方式
+export const { updateSettings, updateUserInfo } = globalSlice.actions;
+
+// 创建 store
+const store = configureStore({
+  reducer: globalSlice.reducer
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;