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

前言

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

 项目gitee地址：lbking666666/enqi-admin

 本系列文章：

• 使用vite+react+ts+Ant Design开发后台管理项目（一）
• 使用vite+react+ts+Ant Design开发后台管理项目（二）
• 使用vite+react+ts+Ant Design开发后台管理项目（三）
• 使用vite+react+ts+Ant Design开发后台管理项目（四）
• 使用vite+react+ts+Ant Design开发后台管理项目（五）

使用redux

上一章布局组件拆分前组件侧边栏和头部需要有交互，根据一个响应式的变量collapsed来进行交互的，目前已经把这两部分拆分到了两个子组件header.tsx和sider.tsx中，此时需要引入redux来对状态进行管理。

引入redux和 @reduxjs/toolkit

# 如果你使用 npm:
 npm install react-redux @reduxjs/toolkit  -S

# 或者你使用 Yarn:
yarn add react-redux @reduxjs/toolkit 

为什么使用 Redux Toolkit

Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。它围绕 Redux 核心，并包含我们认为对于构建 Redux 应用必不可少的软件包和功能。Redux Toolkit 简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序更加容易。

无论你是一个想要开发第一个 Redux 应用的新手，还是想要简化已有应用经验老道的老手，Redux