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

目标

学会react 状态管理工具

使用redux管理用户状态

Context

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

useReducer

useState 的替代方案

简化版的redux

MobX

1. MobX 介绍 · MobX 中文文档

声明式的修改数据 , 像vue

state

action

derivation 派生: computed observer

Redux

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

默认支持跨组件通讯

项目实战--redux

快速开始 | Redux 中文官网

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

引入redux

安装

npm install @reduxjs/toolkit react-redux

为 React 提供 Redux Store

js 复制代码
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

js 复制代码
import { configureStore } from '@reduxjs/toolkit'

import userReducer from './userReducer'

export default configureStore({

  reducer: {

    //分模块注册

    user: userReducer, // 注册userReducer

  

    // 你可以在这里注册更多的reducer

  }

})

创建 Redux State Slice

js 复制代码
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.actions

export default userSlice.reducer

使用

用户信息存储

自定义hook

js 复制代码
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

js 复制代码
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/register

            if(isLoginOrRegiter(pathname))

             {

                nav(MANAGE_PATH)

             }

            return

        }

  

        //没有登录

        if(isNeedUserInfo(pathname))

        {

            nav(LOGIN_PATH);

        }

  
  
  

    },[username,pathname])

  

}

  
  
  

export default useNavPage;

总结

自定义hook使用

useGetUserInfo

useLoadUserData

useNavPage

相关推荐
彭世瑜几秒前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five3 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序3 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫5413 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普4 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省4 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_9855 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript