使用vite+react+ts+Ant Design开发后台管理项目（三）

吕彬-前端2024-09-27 19:44

前言

本文将引导开发者从零基础开始，运用vite、react、react-router、react-redux、Ant Design、less、tailwindcss、axios等前沿技术栈，构建一个高效、响应式的后台管理系统。通过详细的步骤和实践指导，文章旨在为开发者揭示如何利用这些技术工具，从项目构思到最终实现的全过程，提供清晰的开发思路和实用的技术应用技巧。

项目gitee地址：lbking666666/enqi-admin

本系列文章：

添加配置

添加设置按钮

目前头部只有一个控制左侧菜单的按钮，需要在右侧添加一个按钮可以设置整体的一些配置。修改layout文件夹下的header.tsx文件

javascript 复制代码 
//layout/header.tsx
import React from "react";
import { Button, Layout, theme } from "antd";
import { MenuFoldOutlined, MenuUnfoldOutlined,SettingOutlined } from "@ant-design/icons";
const { Header } = Layout;
interface AppSiderProps {
  collapsed: boolean;
}
const AppHeader: React.FC<AppSiderProps> = ({ collapsed }) => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  
  return (
    <Header style={{ padding: 0, background: colorBgContainer }}>
     <Flex gap="middle" justify="space-between" align="center">
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          style={{
            fontSize: "16px",
            width: 64,
            height: 64,
          }}
          onClick={handleCollapsed}
        />
        <Button
          type="primary"
          className="mr-4"
          icon={<SettingOutlined />}
        />
      </Flex>
    </Header>
  );
};
export default AppHeader;

添加Drawer抽屉

从Ant Design选择抽屉组件截图如下

把这里的代码拿到layout文件夹下的header.tsx文件中

javascript 复制代码 
//layout/header.tsx

import React, { useState } from "react";
import { Button, Layout, theme, Flex, Drawer } from "antd";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { useAppDispatch } from "@/hooks/UseGlobal.hooks";
import { setCollapsed } from "@/store/reducers/global";
const { Header } = Layout;
interface AppSiderProps {
  collapsed: boolean;
}

const AppHeader: React.FC<AppSiderProps> = ({ collapsed }) => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const [showPoup, setShowPoup] = useState(false);
  const dispatch = useAppDispatch();
  //收缩事件
  const handleCollapsed = () => {
    //更新全局状态  collapsed
    dispatch(setCollapsed());
  };
  //设置按钮点击事件
  const handleShowPoup = () => {
    console.log("点击了按钮");
    setShowPoup(true);
  };
  const onClose = () => {
    setShowPoup(false);
  };
  return (
    <Header style={{ padding: 0, background: colorBgContainer }}>
      <Flex gap="middle" justify="space-between" align="center">
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          style={{
            fontSize: "16px",
            width: 64,
            height: 64,
          }}
          onClick={handleCollapsed}
        />
        <Button
          type="primary"
          className="mr-4"
          icon={<SettingOutlined />}
          onClick={handleShowPoup}
        />
      </Flex>
      <Drawer title="Basic Drawer" onClose={onClose} open={showPoup}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </Header>
  );
};
export default AppHeader;

查看效果发现关闭按钮在左侧一般我们习惯把关闭按钮放到右侧根据Ant Design的Drawer的api我们可以设置closeIcon和extra这两个

javascript 复制代码 
//layout/header.tsx
import React, { useState } from "react";
import { Button, Layout, theme, Flex, Drawer,Space } from "antd";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingOutlined,
  CloseOutlined
} from "@ant-design/icons";
import { useAppDispatch } from "@/hooks/UseGlobal.hooks";
import { setCollapsed } from "@/store/reducers/global";
const { Header } = Layout;
interface AppSiderProps {
  collapsed: boolean;
}

const AppHeader: React.FC<AppSiderProps> = ({ collapsed }) => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const [showPoup, setShowPoup] = useState(false);
  const dispatch = useAppDispatch();
  //收缩事件
  const handleCollapsed = () => {
    //更新全局状态  collapsed
    dispatch(setCollapsed());
  };
  //设置按钮点击事件
  const handleShowPoup = () => {
    console.log("点击了按钮");
    setShowPoup(true);
  };
  const onClose = () => {
    setShowPoup(false);
  };
  return (
    <Header style={{ padding: 0, background: colorBgContainer }}>
      <Flex gap="middle" justify="space-between" align="center">
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          style={{
            fontSize: "16px",
            width: 64,
            height: 64,
          }}
          onClick={handleCollapsed}
        />
        <Button
          type="primary"
          className="mr-4"
          icon={<SettingOutlined />}
          onClick={handleShowPoup}
        />
      </Flex>
      <Drawer
        title="设置"
        closeIcon={false}
        open={showPoup}
        extra={
          <Space>
            <Button type="link" onClick={onClose} icon={<CloseOutlined />}></Button>
          </Space>
        }
      ></Drawer>
    </Header>
  );
};
export default AppHeader;

效果如下图这里关闭按钮在右侧了

添加设置项

这里的查看Ant Design官网后，选择了三项设置，主题颜色的配置，暗黑模式、圆角模式

先把这三个内容添加进来，控制这三个的响应式变量先使用useState在头部组件中定义出来等调试好之后再更换为redux状态管理

javascript 复制代码 
//layout/header.tsx
import React, { useState } from "react";
import { Button, Layout, theme, Flex, Drawer, Space, Switch } from "antd";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingOutlined,
  CloseOutlined,
  CheckOutlined,
} from "@ant-design/icons";
import { useAppDispatch } from "@/hooks/UseGlobal.hooks";
import { setCollapsed } from "@/store/reducers/global";
const { Header } = Layout;
interface AppSiderProps {
  collapsed: boolean;
}
const colors = [
  {
    name: "拂晓蓝",
    value: "#1677ff",
  },
  {
    name: "薄暮",
    value: "#5f80c7",
  },
  {
    name: "日暮",
    value: "#faad14",
  },
  {
    name: "火山",
    value: "#f5686f",
  },
  {
    name: "酱紫",
    value: "#9266f9",
  },
  {
    name: "极光绿",
    value: "#3c9",
  },
  {
    name: "极客蓝",
    value: "#32a2d4",
  },
];

const AppHeader: React.FC<AppSiderProps> = ({ collapsed }) => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  //抽屉弹出
  const [showPoup, setShowPoup] = useState(false);
  const [curColor, setCurColor] = useState("#1677ff");
  const [isSelectdDark, setIsSelectdDark] = useState(false);
  const [isSelectdRadius, setIsSelectdRadius] = useState(false);
  const onChangeDark = (checked: boolean) => {
    setIsSelectdDark(checked);
  };
  const onChangeRadius = (checked: boolean) => {
    setIsSelectdRadius(checked);
  };
  const handlesetCurColor = (color: string) => {
    setCurColor(color);
  };
  const ColorItem: React.FC<{ color: string; isSelectd: boolean }> = ({
    color,
    isSelectd,
  }) => {
    if (isSelectd) {
      return (
        <div
          className="w-6 h-6 flex justify-center items-center  rounded cursor-pointer items"
          style={{ background: color }}
        >
          <CheckOutlined style={{ color: "#fff" }} />
        </div>
      );
    } else {
      return (
        <div
          className="w-6 h-6 flex justify-center items-center  rounded cursor-pointer items"
          style={{ background: color }}
          onClick={() => handlesetCurColor(color)}
        ></div>
      );
    }
  };
  const dispatch = useAppDispatch();
  //收缩事件
  const handleCollapsed = () => {
    //更新全局状态  collapsed
    dispatch(setCollapsed());
  };
  //设置按钮点击事件
  const handleShowPoup = () => {
    setShowPoup(true);
  };
  const onClose = () => {
    setShowPoup(false);
  };
  return (
    <Header style={{ padding: 0, background: colorBgContainer }}>
      <Flex gap="middle" justify="space-between" align="center">
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          style={{
            fontSize: "16px",
            width: 64,
            height: 64,
          }}
          onClick={handleCollapsed}
        />
        <Button
          type="primary"
          className="mr-4"
          icon={<SettingOutlined />}
          onClick={handleShowPoup}
        />
      </Flex>
      <Drawer
        title="设置"
        width={300}
        closeIcon={false}
        open={showPoup}
        extra={
          <Space>
            <Button
              type="text"
              onClick={onClose}
              icon={<CloseOutlined />}
            ></Button>
          </Space>
        }
      >
        <div className="mb-3 font-bold">主题颜色</div>
        <Flex gap="middle" justify="space-between" align="center">
          {colors.map((item) => (
            <ColorItem
              key={item.value}
              color={item.value}
              isSelectd={curColor == item.value}
            />
          ))}
        </Flex>
        <div className="mb-3 mt-3 font-bold">主题模式</div>
        <div className="flex justify-between">
          <div className="flex gap-2">
            <span>开启暗黑模式</span>
          </div>
          <div className="flex gap-2">
            <Switch defaultChecked checked={isSelectdDark} onChange={onChangeDark} />
          </div>

        </div>
        <div className="flex justify-between">
          <div className="flex gap-2">
            <span>开启圆角主题</span>
          </div>
          <div className="flex gap-2">
            <Switch defaultChecked checked={isSelectdRadius} onChange={onChangeRadius} />
          </div>

        </div>
      </Drawer>
    </Header>
  );
};
export default AppHeader;

此时查看效果如下图，修改主题颜色、暗黑模式、圆角模式都可以得到对应的效果

改造global.ts

把三个设置项和设置drawer显隐状态抽离到之前的global.ts文件中

javascript 复制代码 
//store/reducers/global.ts
import { createSlice } from "@reduxjs/toolkit";
import type { RootState } from "@/store/index.ts";

// 定义初始 state 的类型
interface GlobalState {
  collapsed: boolean;//是否折叠
  showSetting: boolean;//是否显示设置
  colorPrimary: string;//主题颜色
  isDark: boolean;//是否暗黑模式
  isRadius:boolean;//是否圆角
}
// 使用该类型定义初始 state
const initialState: GlobalState = {
  collapsed: false,
  showSetting: false,
  colorPrimary: "#1677ff",
  isDark: false,
  isRadius:true
};
// 创建 slice
export const globalSlice = createSlice({
  name: "global", // 名称
  initialState, // 初始 state
  reducers: {
    // 定义 reducer 函数，该函数接受 state 和 action 作为参数
    setCollapsed: (state) => {
      // 更新 state
      state.collapsed = !state.collapsed;
    },
    setShowSetting: (state,action) => {
      // 更新设置状态为 action 载荷
      state.showSetting = action.payload;
    },
    setIsDark: (state) => {
      // 更新暗黑模式状态
      state.isDark = !state.isDark;
    },
    setColorPrimary: (state, action) => {
      // 更新主题颜色为 action 载荷
      state.colorPrimary = action.payload;
    },
    setIsRadius: (state) => {
      // 更新圆角状态
      state.isRadius = !state.isRadius;
    },
  },
});

// 为每个 case reducer 函数生成 Action creators
export const { setCollapsed, setIsDark, setColorPrimary,setShowSetting,setIsRadius } =
  globalSlice.actions;
// selectors 等其他代码可以使用导入的 `RootState` 类型
export const selectCollapsed = (state: RootState) => state.global.collapsed;
export const selectShowSetting = (state: RootState) => state.global.showSetting;
export const selectColorPrimary = (state: RootState) =>
  state.global.colorPrimary;
export const selectIsDark = (state: RootState) => state.global.isDark;
export const selectIsRadius = (state: RootState) => state.global.isRadius;
// 导出 reducer
export default globalSlice.reducer;

添加设置项组件

把设置项drawer的代码抽离到单独的组件中，在layout文件夹下新增setting.tsx

javascript 复制代码 
//layout/setting.tsx
import React, { useState } from "react";
import { Button, Flex, Drawer, Space, Switch } from "antd";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";
const colors = [
  {
    name: "拂晓蓝",
    value: "#1677ff",
  },
  {
    name: "薄暮",
    value: "#5f80c7",
  },
  {
    name: "日暮",
    value: "#faad14",
  },
  {
    name: "火山",
    value: "#f5686f",
  },
  {
    name: "酱紫",
    value: "#9266f9",
  },
  {
    name: "极光绿",
    value: "#3c9",
  },
  {
    name: "极客蓝",
    value: "#32a2d4",
  },
];
const Setting = () => {
  const [showPoup, setShowPoup] = useState(false);
  const [curColor, setCurColor] = useState("#1677ff");
  const [isSelectdDark, setIsSelectdDark] = useState(false);
  const [isSelectdRadius, setIsSelectdRadius] = useState(false);
  const onChangeDark = (checked: boolean) => {
    setIsSelectdDark(checked);
  };
  const onChangeRadius = (checked: boolean) => {
    setIsSelectdRadius(checked);
  };
  const handlesetCurColor = (color: string) => {
    setCurColor(color);
  };
  
  const onClose = () => {
    setShowPoup(false);
  };
  const ColorItem: React.FC<{ color: string; isSelectd: boolean }> = ({
    color,
    isSelectd,
  }) => {
    if (isSelectd) {
      return (
        <div
          className="w-6 h-6 flex justify-center items-center  rounded cursor-pointer items"
          style={{ background: color }}
        >
          <CheckOutlined style={{ color: "#fff" }} />
        </div>
      );
    } else {
      return (
        <div
          className="w-6 h-6 flex justify-center items-center  rounded cursor-pointer items"
          style={{ background: color }}
          onClick={() => handlesetCurColor(color)}
        ></div>
      );
    }
  };
  return (
    <Drawer
      title="设置"
      width={300}
      closeIcon={false}
      open={showPoup}
      extra={
        <Space>
          <Button
            type="text"
            onClick={onClose}
            icon={<CloseOutlined />}
          ></Button>
        </Space>
      }
    >
      <div className="mb-3 font-bold">主题颜色</div>
      <Flex gap="middle" justify="space-between" align="center">
        {colors.map((item) => (
          <ColorItem
            key={item.value}
            color={item.value}
            isSelectd={curColor == item.value}
          />
        ))}
      </Flex>
      <div className="mb-3 mt-3 font-bold">主题模式</div>
      <div className="flex justify-between mb-3">
        <div className="flex gap-2">
          <span>开启暗黑模式</span>
        </div>
        <div className="flex gap-2">
          <Switch
            defaultChecked
            checked={isSelectdDark}
            onChange={onChangeDark}
          />
        </div>
      </div>
      <div className="flex justify-between">
        <div className="flex gap-2">
          <span>开启圆角主题</span>
        </div>
        <div className="flex gap-2">
          <Switch
            defaultChecked
            checked={isSelectdRadius}
            onChange={onChangeRadius}
          />
        </div>
      </div>
    </Drawer>
  );
};

export default Setting;

组件中应用redux状态

头部组件

javascript 复制代码 
//laout/header.tsx
import React, { useState } from "react";
import { Button, Flex, Drawer, Space, Switch } from "antd";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";
const colors = [
  {
    name: "拂晓蓝",
    value: "#1677ff",
  },
  {
    name: "薄暮",
    value: "#5f80c7",
  },
  {
    name: "日暮",
    value: "#faad14",
  },
  {
    name: "火山",
    value: "#f5686f",
  },
  {
    name: "酱紫",
    value: "#9266f9",
  },
  {
    name: "极光绿",
    value: "#3c9",
  },
  {
    name: "极客蓝",
    value: "#32a2d4",
  },
];
const Setting = () => {
  const [showPoup, setShowPoup] = useState(false);
  const [curColor, setCurColor] = useState("#1677ff");
  const [isSelectdDark, setIsSelectdDark] = useState(false);
  const [isSelectdRadius, setIsSelectdRadius] = useState(false);
  const onChangeDark = (checked: boolean) => {
    setIsSelectdDark(checked);
  };
  const onChangeRadius = (checked: boolean) => {
    setIsSelectdRadius(checked);
  };
  const handlesetCurColor = (color: string) => {
    setCurColor(color);
  };
  
  const onClose = () => {
    setShowPoup(false);
  };
  const ColorItem: React.FC<{ color: string; isSelectd: boolean }> = ({
    color,
    isSelectd,
  }) => {
    if (isSelectd) {
      return (
        <div
          className="w-6 h-6 flex justify-center items-center  rounded cursor-pointer items"
          style={{ background: color }}
        >
          <CheckOutlined style={{ color: "#fff" }} />
        </div>
      );
    } else {
      return (
        <div
          className="w-6 h-6 flex justify-center items-center  rounded cursor-pointer items"
          style={{ background: color }}
          onClick={() => handlesetCurColor(color)}
        ></div>
      );
    }
  };
  return (
    <Drawer
      title="设置"
      width={300}
      closeIcon={false}
      open={showPoup}
      extra={
        <Space>
          <Button
            type="text"
            onClick={onClose}
            icon={<CloseOutlined />}
          ></Button>
        </Space>
      }
    >
      <div className="mb-3 font-bold">主题颜色</div>
      <Flex gap="middle" justify="space-between" align="center">
        {colors.map((item) => (
          <ColorItem
            key={item.value}
            color={item.value}
            isSelectd={curColor == item.value}
          />
        ))}
      </Flex>
      <div className="mb-3 mt-3 font-bold">主题模式</div>
      <div className="flex justify-between mb-3">
        <div className="flex gap-2">
          <span>开启暗黑模式</span>
        </div>
        <div className="flex gap-2">
          <Switch
            defaultChecked
            checked={isSelectdDark}
            onChange={onChangeDark}
          />
        </div>
      </div>
      <div className="flex justify-between">
        <div className="flex gap-2">
          <span>开启圆角主题</span>
        </div>
        <div className="flex gap-2">
          <Switch
            defaultChecked
            checked={isSelectdRadius}
            onChange={onChangeRadius}
          />
        </div>
      </div>
    </Drawer>
  );
};

export default Setting;

设置组件

javascript 复制代码 
//layout/setting.tsx
import React from "react";
import { Button, Flex, Drawer, Space, Switch } from "antd";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";
import { useAppSelector,useAppDispatch } from "@/hooks/UseGlobal.hooks";
import {  selectColorPrimary,selectIsDark,selectIsRadius,setIsDark, setColorPrimary,setShowSetting,setIsRadius } from "@/store/reducers/global";
const colors = [
  {
    name: "拂晓蓝",
    value: "#1677ff",
  },
  {
    name: "薄暮",
    value: "#5f80c7",
  },
  {
    name: "日暮",
    value: "#faad14",
  },
  {
    name: "火山",
    value: "#f5686f",
  },
  {
    name: "酱紫",
    value: "#9266f9",
  },
  {
    name: "极光绿",
    value: "#3c9",
  },
  {
    name: "极客蓝",
    value: "#32a2d4",
  },
];
type AppSiderProps = {
  showPoup: boolean;
}
const Setting:React.FC<AppSiderProps> = ({showPoup}) => {
  const curColor = useAppSelector(selectColorPrimary);
  const isSelectdDark = useAppSelector(selectIsDark);
  const isSelectdRadius = useAppSelector(selectIsRadius);
  const dispatch = useAppDispatch();
  const onChangeDark = () => {
    dispatch(setIsDark());
  };
  const onChangeRadius = () => {
    dispatch(setIsRadius());
  };
  const handlesetCurColor = (color: string) => {
    dispatch(setColorPrimary(color));
  };
  
  const onClose = () => {
    dispatch(setShowSetting(false));
  };
  const ColorItem: React.FC<{ color: string; isSelectd: boolean }> = ({
    color,
    isSelectd,
  }) => {
    if (isSelectd) {
      return (
        <div
          className="w-6 h-6 flex justify-center items-center  rounded cursor-pointer items"
          style={{ background: color }}
        >
          <CheckOutlined style={{ color: "#fff" }} />
        </div>
      );
    } else {
      return (
        <div
          className="w-6 h-6 flex justify-center items-center  rounded cursor-pointer items"
          style={{ background: color }}
          onClick={() => handlesetCurColor(color)}
        ></div>
      );
    }
  };
  return (
    <Drawer
      title="设置"
      width={300}
      closeIcon={false}
      open={showPoup}
      extra={
        <Space>
          <Button
            type="text"
            onClick={onClose}
            icon={<CloseOutlined />}
          ></Button>
        </Space>
      }
    >
      <div className="mb-3 font-bold">主题颜色</div>
      <Flex gap="middle" justify="space-between" align="center">
        {colors.map((item) => (
          <ColorItem
            key={item.value}
            color={item.value}
            isSelectd={curColor == item.value}
          />
        ))}
      </Flex>
      <div className="mb-3 mt-3 font-bold">主题模式</div>
      <div className="flex justify-between mb-3">
        <div className="flex gap-2">
          <span>开启暗黑模式</span>
        </div>
        <div className="flex gap-2">
          <Switch
            defaultChecked
            checked={isSelectdDark}
            onChange={onChangeDark}
          />
        </div>
      </div>
      <div className="flex justify-between">
        <div className="flex gap-2">
          <span>开启圆角主题</span>
        </div>
        <div className="flex gap-2">
          <Switch
            defaultChecked
            checked={isSelectdRadius}
            onChange={onChangeRadius}
          />
        </div>
      </div>
    </Drawer>
  );
};

export default Setting;

本地存储

设置了不同的主题和是否选择暗黑模式、圆角模式后我们希望使用者在下次进入到系统时候能继续使用之前的选择，这时我们需要对global.ts的状态管理做一些改造，把状态存储到本地存储中

javascript 复制代码 
//store/reducers/global.ts
import { createSlice } from "@reduxjs/toolkit";
import type { RootState } from "@/store/index.ts";

// 定义初始 state 的类型
interface GlobalState {
  collapsed: boolean; //是否折叠
  showSetting: boolean; //是否显示设置
  colorPrimary: string; //主题颜色
  isDark: boolean; //是否暗黑模式
  isRadius: boolean; //是否圆角
}
const getLocal = (type:string) => {
  //获取本地存储
  return localStorage.getItem(type);
};
// 使用该类型定义初始 state
const initialState: GlobalState = {
  collapsed: getLocal("collapsed")==='true' || false,
  showSetting: false,
  colorPrimary: getLocal("colorPrimary") || "#1677ff",
  isDark: getLocal("isDark") ==='true' || false,
  isRadius: getLocal("isRadius")!=='false' || true,
};
const setLocal = (type:string,value: string | boolean)=>{
  if (typeof value === 'string') {
    localStorage.setItem(type, value);
} else {
    // 可以选择忽略非字符串值，或者进行转换处理
    // 例如，将布尔值转换为字符串
    localStorage.setItem(type, value.toString());
}
}
// 创建 slice
export const globalSlice = createSlice({
  name: "global", // 名称
  initialState, // 初始 state
  reducers: {
    // 定义 reducer 函数，该函数接受 state 和 action 作为参数
    setCollapsed: (state) => {
      // 更新 state
      state.collapsed = !state.collapsed;
      setLocal("collapsed",state.collapsed);
    },
    setShowSetting: (state, action) => {
      // 更新设置状态为 action 载荷
      state.showSetting = action.payload;
    },
    setIsDark: (state) => {
      // 更新暗黑模式状态
      state.isDark = !state.isDark;
      setLocal("isDark",state.isDark);
    },
    setColorPrimary: (state, action) => {
      // 更新主题颜色为 action 载荷
      state.colorPrimary = action.payload;
      setLocal('colorPrimary',action.payload);
    },
    setIsRadius: (state) => {
      // 更新圆角状态
      state.isRadius = !state.isRadius;
      setLocal("isRadius",state.isRadius);
    },
  },
});

// 为每个 case reducer 函数生成 Action creators
export const {
  setCollapsed,
  setIsDark,
  setColorPrimary,
  setShowSetting,
  setIsRadius,
} = globalSlice.actions;
// selectors 等其他代码可以使用导入的 `RootState` 类型
export const selectCollapsed = (state: RootState) => state.global.collapsed;
export const selectShowSetting = (state: RootState) => state.global.showSetting;
export const selectColorPrimary = (state: RootState) =>
  state.global.colorPrimary;
export const selectIsDark = (state: RootState) => state.global.isDark;
export const selectIsRadius = (state: RootState) => state.global.isRadius;
// 导出 reducer
export default globalSlice.reducer;

此时我们选择不同的设置

刷新页面后可以看到就是之前设置好的配置

总结

到此我们对全局配置的一个大概的工作完成了，当然实际项目和需求中可能会有不同或更多的配置按照这个思路可以添加不同的配置，当然如果已经很熟练的使用react+redux可以直接省略掉很多中间的步骤 ，比如直接新建setting.tsx子组件写逻辑，和直接在global.ts中添加状态管理及方法在组件中直接应用。

后续

本篇文章为项目使用redux配合本地存储做了全局设置，代码已经同步到了gitee仓库，下一篇会使用axios和mock来设置左侧菜单

相关推荐
阿伟来咯~13 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端18 分钟前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱21 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai30 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨31 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts！从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解