React + 项目(从基础到实战) -- 第十期

目标

学会react 状态管理工具
使用redux管理用户状态

Context

跨层级传递,不像props层层传递
类似于Vue的provide/inject
用于:切换主题颜色,切换语言

useReducer

useState 的替代方案
简化版的redux

MobX

1. MobX 介绍 · MobX 中文文档

声明式的修改数据 , 像vue
state
action
derivation 派生: computed observer

Redux

state/store (存储的数据)
action(发布的命令类似导航让我们知道发生了什么)
reducer(生成新的state 联系起state与action)
dispatch(派发的action,产生数据)

默认支持跨组件通讯

redux_36">项目实战–redux

快速开始 | Redux 中文官网

Redux 要求我们通过创建数据副本和更新数据副本，来实现不可变地写入所有状态更新。不过 Redux Toolkit createSlice 和 createReducer 在内部使用 Immer 允许我们编写“可变”的更新逻辑，变成正确的不可变更新。

redux_41">引入redux

安装

npm install @reduxjs/toolkit react-redux

为 React 提供 Redux Store

import React from 'react'import ReactDOM from 'react-dom/client'import App from './App.tsx'import { Provider } from 'react-redux'import store from './store/index.ts'ReactDOM.createRoot(document.getElementById('root')!).render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>,)

创建Redux Store

import { configureStore } from '@reduxjs/toolkit'import userReducer from './userReducer'export default configureStore({reducer: {//分模块注册user: userReducer, // 注册userReducer// 你可以在这里注册更多的reducer}})

创建 Redux State Slice

import { createSlice , PayloadAction } from "@reduxjs/toolkit";export type UserStateType={username:string,nickname:string}const INIT_STATE:UserStateType={username:"",nickname:""}export const userSlice=createSlice({name:"user",initialState:INIT_STATE,reducers:{//登录保存用户信息loginReducer:(state,action:PayloadAction<UserStateType>)=>{return action.payload // 设置username nickname 到 redux store//用不到immer},//退出删除用户信息logoutReducer:()=>{return INIT_STATE // 设置username nickname 到 redux store//用不到immer}}})export const {loginReducer,logoutReducer}=userSlice.actionsexport default userSlice.reducer

使用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

用户信息存储

自定义hook

import { useEffect , useState } from "react";import { useRequest } from "ahooks";//导入发起请求的函数import { useDispatch } from "react-redux";import { getUserInfoService } from "../services/user";import { loginReducer } from "../store/userReducer";import useGetUserInfo from "./useGetUserInfo";function useLoadUserData() {const dispatch = useDispatch();const [waitingUserData , setWaitingUserData] = useState(true);//ajax 加载用户信息const {run } = useRequest(getUserInfoService , {manual:true,onSuccess: (data) => {const {username , nickname} = data;dispatch(loginReducer({username,nickname})) // 存储到redux store},onFinally(){setWaitingUserData(false);}})//判断当前的redux  store 是否存在用户信息const {username} = useGetUserInfo()useEffect(() => {if(username){setWaitingUserData(false); // redux中存在信息,则不用重新加载return ;}run();// 如果不存在,则进行加载},[username])return {waitingUserData};}export default useLoadUserData;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

由于后端有延迟,首页闪了一下,前端使用spin组件(显示加载效果)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

bug :用户登录成功后.还能访问登录注册页

预期效果:
已经登录
1. 跳转页面是登录注册页 , 重定向到我的问卷
2. 跳转页面不是登录注册页,放行
未登录
1. 跳转页面需要用户信息,重定向到登录页
2. 跳转页面不需要用户信息,放行

自定义hook

import React , {FC, useEffect} from "react";import useGetUserInfo from "./useGetUserInfo";import { useNavigate ,useLocation } from "react-router-dom";import useLoadUserData from "./useLoadUserData";import { isLoginOrRegiter, isNeedUserInfo, LOGIN_PATH, MANAGE_PATH } from "../router";function useNavPage() {const {waitingUserData} = useLoadUserData();const {username} = useGetUserInfo();const {pathname} = useLocation();const nav = useNavigate();useEffect(()=>{if(waitingUserData) return ;//已经登录了if(username){//跳转的页面是login/registerif(isLoginOrRegiter(pathname)){nav(MANAGE_PATH)}return}//没有登录if(isNeedUserInfo(pathname)){nav(LOGIN_PATH);}},[username,pathname])}export default useNavPage;