12、创建应用通用布局及状态管理

创建应用通用布局及状态管理

1. 依赖添加

在项目的 package.json 文件的依赖部分，成功添加以下依赖后，就可以开始实现应用功能：

"@reduxjs/toolkit": "~1.8.1",
"react-redux": "~8.0.1"

2. 创建通用布局

我们要创建一个通用布局组件，用于应用的不同页面，提供一致的外观和感觉。布局包括一个顶部栏和一个侧边抽屉。
- 创建布局目录 ：在 src 文件夹下创建 layout 目录，用于存放与布局相关的组件和代码。
- React 组件导出说明 ：实现 React 组件时，为每个组件创建特定的 JavaScript 文件，并根据功能将文件和组件分组到模块/目录中。为了定义公共 API、方便导入、保持命名一致性等，在每个组件目录的 index.js 文件中导出组件。

3. 创建顶部栏组件（TopBar）

顶部栏组件用于显示当前页面标题，并提供导航到主页、创建新任务和执行与登录用户相关操作的按钮。
- 创建文件 ：在 src/layout 目录下创建 TopBar.js 文件，包含以下代码：

e