JavaScript全栈开发(七)

目录

1. 4、添加后端的API地址配置
2. 📝 “注册”集成后端
3. 1、添加submit按钮的事件处理
4. 2、添加Spinner
5. 3、添加ToastContainer提示
6. 📝 测试用户注册
7. 测试密码不一致
8. 测试注册成功
9. 📎 参考文章

# 📝 使用Redux toolkit - 创建frontend\\src\\features\\auth\\authSlice.js ```javascript import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

const localuser = JSON.parse(localStorage.getItem("user")); const initialState = { user: localuser ? localuser : null, isError: false, isSuccess: false, isLoading: false, message: "", };

export const authSlice = createSlice({ name: "auth", initialState, reducers: { reset: (state) => { state.isLoading = false; state.isSuccess = false; state.isError = false; state.message = ""; }, }, extraReducers: () => {}, });

export const { reset } = authSlice.actions; export default authSlice.reducer;

- 在frontend\\src\\app\\store.js中引入authSlice
```javascript
import { configureStore } from "@reduxjs/toolkit";
import authReducer from "../features/auth/authSlice";

export const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});