文章
JavaScript全栈开发(九)
完善Dashboard的相关功能
部分内容超过 Notion API 单页读取上限，已尽力加载可访问内容。
# 📝更新Dashboard的显示逻辑
前面的章节中,我们无需登录就能看见Dashboard,如下:
现在要更新为登录后才能看到Dashboard
我们输入[http://localhost:3000/](http://localhost:3000/),如果没有登录会自动跳转到登录页面
## 更新Dashboard.js
修改frontend\\src\\components\\Dashboard.js
# 📝创建Task Slice
## 新建 taskSlice.js和taskService.js
新建taskSlice.js和taskService.js对比auth的相关代码
在frontend\\src\\features\\task\\taskSlice.js 中添加如下代码：
```javascript
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
const initialState = {
tasks: [],
isError: false,
isSuccess: false,
isLoading: false,
message: "",
};
export const taskSlice = createSlice({ name: "task", initialState, reducers: { reset: (state) => initialState, }, });
export const { reset } = taskSlice.actions; export default taskSlice.reducers;
## 更新store.js
在frontend\\src\\app\\store.js中添加如下代码：
重启前端服务，在浏览器中可以看到如下内容：
## 更新Dashboard界面
更新frontend\\src\\components\\Dashboard.js,
从Dashboard获取username
# 📝创建Task Form
## 添加Task Form创建入口
创建一个TaskForm.js
```javascript
import { useState } from "react";
import { useDispatch } from "react-redux";
const TaskForm = () => {
return <div>TaskForm</div>;
};
export default TaskForm;