Redux部分

在src文件夹下 的store文件夹下创建modules/user.js和index.js

module/ user.js

// 存储用户相关const { createSlice } = require("@reduxjs/toolkit");const userStore = createSlice({name:"user",// 数据状态initialState:{token:''},// 同步修改方法reducers:{setToken(State,action){// 第一个参数是包括当前状态属性token的对象// 第二个参数是包括触发修改以及如何修改state的对象 装在payload属性中 State.token = action.payload}}
})// 解构出可以创建action对象的函数 就是createSlice()函数中的reducers方法
const {setToken} = userStore.actions// 获取reducer函数
const userReducer = userStore.reducer// 按需导出action创建函数
export {setToken}// 等下要组合各种数据默认导出
export default userReducer

index.js

//  组合redux子模块 导出store实例 
//  子模块包含各种类型需共享的数据 const { configureStore } = require("@reduxjs/toolkit");
const { useReducer } = require("react");// 获取总的实例对象
const store = configureStore({reducer:{user:useReducer}
})export default store

异步redux

方法：重新写一个函数，在组件中使用useEffect钩子函数设置异步触发的时机

在utils中封装的request.js

import axios from 'axios'// 封装axios请求
// 更域名配置 
// 超时时间
const request = axios.create({baseURL:'http://geek.itheima.net/v1_0',timeout:5000
})// 请求拦截器和相应拦截器 
// 添加请求拦截器
// 请求发出去前加入自定义配置
request.interceptors.request.use((config)=> {return config}, (error)=> {return Promise.reject(error)
})// 添加响应拦截器
// 在相应返回到客户端之前做拦截 
request.interceptors.response.use((response)=> {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response.data}, (error)=> {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error)
})export { request }

modules下的user.js