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

2024-04-30 14:04

本文主要是介绍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 createSlice 和 createReducer 在内部使用 Immer 允许我们编写“可变”的更新逻辑,变成正确的不可变更新。

引入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;

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

总结

自定义hook使用
useGetUserInfo
useLoadUserData
useNavPage

这篇关于React + 项目(从基础到实战) -- 第十期的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/949062

相关文章

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言(assert):从原理到实战引言:为什么需要断言?一、断言基础1.1 语

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者(Producer)配置1. 创建 Spr

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)