react用redux实现登录

提交表单后，用dispatch执行createAsyncThunk得返回结果，createAsyncThunk里传入登录得接口和数据和dispatch取reducers这里的函数，用来保存登录成功得数据。最后就可以用

//点击登录后得执行得函数
const onFinish = async (values: any) => {
      await dispatch(loginStore({ ...values, uuid: imgData.uuid }))
      const temp = store.getState().login//获取登录得信息
      if (temp.userInfo.status) {
        message.success('登录成功')
        navigate('/main')
      } else {
         message.error('登录失败')
         getValidCode()
       }
 }

//请求得接口
export function loginApi(requestUser: object) {
    return hyRequest.post({
        url: '/auth/login',
        data: requestUser
    })
}

//store文件
export const loginStore = createAsyncThunk(
  'login',
  async (payload: any, { dispatch }) => {
    const res = await loginApi(payload)

    if (res.data.status) {
      dispatch(afterLogin(res.data))
    }
    return res
  }
)

export const loginSlice = createSlice({
    name: 'login',
    initialState: {
        token: '',
        userInfo: {
            avatar: '',
            username: '',
            roleName: '',
            roleId: undefined,
            status: false
        },
        menuList: undefined,
        userMenu: undefined,
        roles: undefined
    },
    reducers: {
        afterLogin: (state, { payload }) => {
              state.token = payload.token
              state.userInfo.avatar = payload.avatar
              state.userInfo.roleName = payload.roleName
              state.userInfo.status = payload.status
              state.userInfo.username = payload.username
              state.userInfo.roleId = payload.roleId
              localCache.setCache(LOGIN_TOKEN, payload.token)
            },
            menuList: (state, { payload }) => {
              console.log(payload, 'menuList')
            }
    }
})