react用mobx进行全局状态管理

已于 2023-09-12 00:32:20 修改
阅读量178 收藏
点赞数 1
文章标签： javascript
于 2023-09-04 15:16:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41333696/article/details/132667228
版权
  1. 文件层级

my-react-app

  • src
    • components
      • timerUI.jsx
      • withTimerLogic.jsx
    • pages
      • home.jsx
      • login.jsx
      • page1.jsx
      • page2.jsx
    • stores
      • authStore.js
    • app.jsx
    • index.js
  • public
    • index.html
      • id=“root”

注释:

  • src：源代码
  • components：react组件，被多次调用，页面的一部分
  • pages：react页面，被app.js调用，能单独成页面
  • stores：全局状态仓库
  • app.jsx：react根组件
  • index.js：react应用的入口文件，将react组件挂载到html文件的根节点上，启动了整个react应用
  • public：静态文件
  • index.html：web应用的html入口文件，不是react组件
  • id=“root”：react应用的根节点、起点，react组件首次渲染到html文件的位置，承载着整个react应用的内容
  1. react类组件使用mobx管理登录状态
  • index.html（包含了根节点）
<!--idea中输入html5回车，自动生成模板-->
<!doctype html>
<html>
<head>
 <meta>
 <title>my-react-app</title>
</head>
<body>
 <div id="root"></div>
</body>
</html>
  • index.js（将根组件挂载到根节点、分发全局登录状态，提供路由功能）
import React from "react"
import ReactDOM from "react-dom"
import {Provider} from "mobx-react"
import authStore from "./stores/authStore"
import {BrowserRouter as Router} from "react-router-dom"
import App from "./app"

ReactDOM.render(
 <Provider authStore={authStore}>
  <Router>
   <App/>
  </Router>
 </Provider>
 ,
 document.getElementById("root")
)
  • authStore.js（管理全局登录状态）
import {observable,action} from "mobx"

class AuthStore{
//不需要extends Component，因为不是react组件，不负责渲染UI
//不能直接export default，因为需要导出的是一个实例，不是一个类，用单例模式来保证全局登录状态一致
//变量不需要存储在state中，因为不需要刷新UI了
 @observable isAuth=false
 @observable userName=""
 @observable token=""
 
 constructor(){
  //不属于组件，没有生命周期
  //希望在实例化时能够从LS中读取用户token，这样有效期内不需要每天重新登录
  this.getUserInfo()
 }
 
 @action
 setUserInfo(newUserInfo){
  //存储到状态仓库，全局共享，但关掉浏览器会清空
  this.isAuth=true
  this.userName=newUserInfo.userName
  this.token=newUserInfo.token
  //存储到浏览器，关掉浏览器不会清空，持久化
  localStorage.setItem("userInfo",JSON.stringify(newUserInfo))
 }
 
 @action
 clearUserInfo(){
  this.isAuth=false
  this.userName=""
  this.token=""
  localStorage.removeItem("userInfo")
 }
 
 @action
 getUserInfo(){
  const userInfoLS=localStorage.getItem("userInfo")
  if(userInfoLS){
   const userInfo=JSON.parse(userInfoLS)
   this.setUserInfo(userInfo)
  }
 }
}

const authStore=new AuthStore()
export default authStore
  • app.jsx（根组件、配置路由规则）
import React,{Component} from "react"
import {Layout,Menu,Button,Image} from "antd"
import {Link,Switch,Redirect,Route} from "react-router-dom"
import {inject,observer} from "mobx-react"
import Home from "./pages/home"
import Login from "./pages/login"
import Page1 from "./pages/page1"
import Page2 from "./pages/page2"
const {Header,Content}=Layout

@inject("authStore")
@observer
export default class App extends Component{
 render(){
  return(
   <Layout>
    <Header>
     <Image src={"minio地址"} alt="项目logo"/>
     {this.props.authStore.isAuth&&
     (<>
      <Menu>
       <Menu.Item key="home">
        <Link to="/">首页</Link>
       </Menu.Item>
       <Menu.Item key="page1">
        <Link to="/page1">页面1</Link>
       </Menu.Item>
       <Menu.Item key="page2">
        <Link to="/page2">页面2</Link>
       </Menu.Item>    
      </Menu>
      <Button 
       onClick={this.props.authStore.clearUserInfo}
      >登出</Button>
      </>)}
    </Header>
    <Content>
     <Switch>
      {!this.props.authStore.isAuth&&<Redirect to="/login"/>}
      <Route path="/" component={Home} exact/>
      <Route path="/login" component={Login}/>
      <Route path="/page1" component={Page1}/>
      <Route path="/page2" component={Page2}/>     
     </Switch>
    </Content>
   </Layout>
  )
 }
}
  • login.jsx（登录组件）
import React,{Component} from "react"
import {Layout,Form,Input,Button,message} from "antd"
import axios from "axios"
import {inject,observer} from "mobx-react"
const {Content}=Layout

@inject("authStore")
@observer
export default class Login extends Component{
 
 handleLogin=values=>{
  axios.post("接口地址",{
   username:values.username,
   password:values.password})
   .then(response=>{
    if(response.data.token){
     this.props.authStore.setUserInfo(response.data)
     message.success("登录成功")
     this.props.history.push("/")
    }else{
     message.error("账号密码不存在")
    }
   })
   .catch(error=>{
    message.error("请求失败")
   })
 }

 render(){
  return(
   <Content>
    <Form onFinish={this.handleLogin}>
     <Form.Item name="username" label="用户名">
      <Input/>
     </Form.Item>
     <Form.Item name="password" label="密码">
      <Input.Password/>
     </Form.Item>
     <Form.Item>
      <Button htmlType="submit">登录</Button>
     </Form.Item>
    </Form>
   </Content>
  )
 }
}
  • home.jsx、page.jsx（其他组件）
import React,{Component} from "react"
import {observer} from "mobx-react"
import {Layout} from "antd"
const {Content}=Layout

@observer
export default Home extends Component{
 render(){
  return(
   <Content>
    这是首页
   </Content>
  )
 }
}
  1. react函数组件使用mobx管理登录状态
  • index.html
<!doctype html>
<html>
<head>
 <meta>
 <title>my-react-app</title>
</head>
<body>
 <div id="root"></div>
</body>
</html>
  • index.js
import React from "react"
import ReactDOM from "react-dom"
import {Provider} from "mobx-react"
import authStore from "./stores/authStore"
import {BrowserRouter as Router} from "react-router-dom"
import App from "./app"

ReactDOM.render(
<Provider authStore={authStore}>
 <Router>
  <App/>
 </Router>
</Provider>
,document.getElementById("root"))
  • authStore.js
import {observable,action} from "mobx"

class AuthStore{

 @observable isAuth=false
 @observable username=""
 @observable token=""

 constructor(){
  this.getUserInfo()
 }

 @action
 getUserInfo(){
  const userInfoLS=localStorage.getItem("userInfo")
  //localStorage是web api的一部分，不需要导入
  if(userInfoLS){
   const userInfo=JSON.parse(userInfoLS)
   //JSON是js语言的一部分，parse是js的内置方法，不需要导入
   this.setUserInfo(userInfo)
  }
 }
 
 @action
 setUserInfo(newUserInfo){
  this.isAuth=true
  this.username=newUserInfo.username
  this.token=newUserInfo.token
  localStorage.setItem("userInfo",JSON.stringify(newUserInfo))
 }

 @action
 clearUserInfo(){
  this.isAuth=false
  this.username=""
  this.token=""
  localStorage.removeItem("userInfo")
 }

 const authStore=new AuthStore()
 export default authStore
}
  • app.jsx
import React from "react"
import {inject,observer} from "mobx-react"
import {Layout,Image,Menu,Button} from "antd"
import {Link,Redirect,Switch,Route} from "react-router-dom"
import Home from "./pages/home"
import Login from "./pages/login"
import Page1 from "./pages/page1"
import Page2 from "./pages/page2"
const {Header,Content}=Layout

export default inject("authStore")(observer(({authStore})=>{
 return(
  <Layout>
   <Header>
    <Image src="minio地址" alt="项目logo"/>
    {authStore.isAuth&&
    (<>
     <Menu>
      <Menu.Item key="home">
       <Link to="/">首页</Link>
      </Menu.Item>
      <Menu.Item key="page1">
       <Link to="/page1">页面1</Link>
      </Menu.Item>
      <Menu.Item key="page2">
       <Link to="/page2">页面2</Link>
      </Menu.Item>
     </Menu>
     <Button onClick={authStore.clearUserInfo}>登出</Button>
    </>)}
   </Header>
   <Content>
    <Switch>
     {!authStore.isAuth&&<Redirect to="/login" />}
     <Route path="/" component={Home} exact/>
     <Route path="/login" component={Login}/>
     <Route path="/page1" component={Page1}/>
     <Route path="/page2" component={Page2}/>
    </Switch>
   </Content>
  </Layout>
 )
}))
  • login.jsx
import React from "react"
import axios from "axios"
import {inject,observer} from "mobx-react"
import {Layout,Form,Input,Button,message} from "antd"
const {Content}=Layout

export default inject("authStore")(observer(({authStore})=>{

 handleLogin=(values)=>{
  axios.post("接口地址",{
   username:values.username,
   password:values.password
  }).then(response=>{
   if(response.data.token){
    authStore.setUserInfo(response.data)
    message.success("登录成功")
    props.history.push("/")
   }else{
    message.error("登录失败")
   }
  }).catch(error=>{
   message.error("请求失败")
  })
 }

 return(
  <Content>
   <Form onFinish={handleLogin}>
    <Form.Item name="username" label="用户名">
     <Input/>
    </Form.Item>
    <Form.Item name="password" label="密码">
     <Input.Password/>
    </Form.Item>
    <Form.Item>
     <Button htmlType="submit">登录</Button>
    </Form.Item>
   </Form>
  </Content>
 )
}))
  • home.jsx
import React from "react"
import {observer} from "mobx-react-lite"
import {Layout} from "antd"
const {Content}=Layout

export default observer(()=>{
 return(
  <Content>
   这是首页
  </Content>
 )
})
谈谈React的全局状态管理Redux和Mobx的使用
wang839305939的博客
03-01 5003
目前有很多基于flow理念的状态管理器，Redux和Mobx是目前追随度比较高的两种，那么选择Redux还是Mobx呢？
React使用MobX作为全局状态管理
小火车况且况且况且的博客
07-19 1144
`React`使用`MobX`作为全局状态管理
react通过mobx实现全局状态管理
懒洋洋
03-31 1667
vue 里通过 vuex实现全局状态管理，在react里可以通过redux或者mobx也可以实现全局状态管理；但是通过查看文档，发现redux调用过程有些繁琐，对于一些小白来讲，使用起来有些吃力今天通过简单的demo来介绍使用mobx； 首先安装依赖 yarn add mobx mobx-react 此demo主要用到的东西 observer observable action 目录结构如图...
React 全局状态管理 mobx+hooks+持久化 的使用
weixin_56295520的博客
12-22 1662
React 全局状态管理 mobx+hooks+持久化 的使用
在React里面使用mobx状态管理详细步骤
T3165919332的博客
01-08 1296
创建一个用于管理状态的MobX Store。这个Store应该包含你希望全局管理的状态和相关的操作。在你的应用中，使用。
掌握React+MobX：前端状态管理解决方案
此外，由于MobX可以独立于React使用，也可以将其作为状态管理方案应用到其他前端框架中。 需要注意的是，随着React生态的发展，Facebook官方推出了React的 Hooks API，尤其是useState和useReducer钩子，提供了另一...
(源码)基于React和Mobx的现代化前端管理系统.zip
最新发布
02-13
1. 状态管理使用Mobx进行全局状态管理，支持响应式数据绑定，确保组件状态的高效更新。 2. 路由管理通过React Router进行路由规划，支持动态路由和权限控制，确保用户只能访问有权限的页面。 3. 网络请求封装对Axios...
用 Mobx 实现 React 应用的状态管理
梅花寺
02-28 1093
将 MobX 与 React 结合在一起的关键在于用 observer 包裹组件以及在组件中读取可观察对象，observer 不关心可观察对象从哪里来，也不关心如何读取可观察对象，只关心在组件中可观察对象是否可读。对于习惯面向对象编程的工程师而言，用 MobX 做状态管理会比用 Redux 做状态管理更得心应手。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
React-Mobx-Template:React和MobX设置
05-30
React和MobX是两个在JavaScript开发中...通过这个模板，你可以快速搭建一个使用React进行视图层渲染，借助MobX进行状态管理的项目框架。这将帮助你专注于编写业务代码，而不需要花费太多时间在状态管理的基础架构上。
react/reacthook中使用mobx进行数据状态管理
搬砖小鱼，请多指教呦
11-09 746
这样就可以使用mobx进行数据的管理和存储了，fighting各位。
【react】react18的学习（八）–mobx介绍
zhangankang的博客
05-14 524
也是代替原生redux的公共状态管理方式；mobx@5版本需要浏览器支持es6 proxy，且使用了许多装饰器；mobx@6移除了装饰器语法；
react18【系列实用教程】moxb —— 集中状态管理 （2024最新版）
朝阳39的博客
05-13 866
以 User.js 为例，详见注释// 定义类// 构造函数/** 【自动创建响应式】* 第1个参数：要创建为响应式的对象，此处的this即指当前类* 第2个参数：默认第1个参数的所有属性和方法都会添加响应式，可在此指定不添加响应式的属性和方法，如{if_Login:false},即属性if_Login无响应式* 第3个参数：指定自动绑定this,方便在页面使用时，绑定事件无参数时可不使用箭头函数*/// 属性 if_Login --- 用户是否登录。
微信小程序的全局状态管理 — mobx-miniprogram
不怕麻烦的鹿丸的博客
03-15 4038
在小程序中，常常有些数据需要在几个页面或组件中共享。使用来管理小程序的跨页面数据, 其实类似于vuex的store。小程序的 MobX 绑定辅助库。此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅。可配合 MobX 的小程序构建版 npm 模块使用。更为详细的说明和指引，可点击。
高效的 MobX
热门推荐
canduecho的专栏
02-27 1万+
前言由于最近开启一个新的个人小项目，准备还是使用 React 及其生态来实现整个技术架构，之前一直使用的是 React + React-Router + Redux 组合，虽然说使用 Redux 来管理整个应用的数据流有着优点，但是 Redux 的写法繁琐也确实让人诟病，当然这里并不是说 Redux 不好。基于项目本身并不大，决定寻找一个新的解决方案，而 MobX 在之前就有所耳闻（只是一直没有时...
React的mobx配置、使用以及统一封装代码实例详解
m0_56986233的博客
04-25 2321
1. 安装mobx相关工具 yarn add mobx mobx-react-lite 2.1 若不进行统一管理，直接使用mbox（后面会说统一管理） 新建一个store.js文件夹，下面新建一个count.js文件 //引入 import { makeAutoObservable } from "mobx"; class Counter{ count = 0 constructor() { //定义this makeAutoObservable(this) } addCo
在react中使用Mobx
ngd-b的博客
09-12 1760
全局状态管理mobx； 配置react使用mobx； mobx-react 测试使用示例； 主要核心mobxAPI说明；
一文梳理 React 18 新特性
小柒的前端之旅
03-09 3142
React 的迭代过程 React 从 v16 到 v18 主打的特性包括三个变化： v16: Async Mode (异步模式) v17: Concurrent Mode (并发模式) v18: Concurrent Render (并发更新) React 中 Fiber 树的更新流程分为两个阶段 render 阶段和 commit 阶段。组件的 render 函数执行时称为 render（本次更新需要做哪些变更），纯 js 计算；而将 render 的结果渲染到页面的过程称为 commit （变更到
前端实战｜React18极客园——登陆模块（token持久化、路由拦截、mobx、封装axios）
Coding and studying
09-05 3703
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。
react-mobx 使用案例
mp159的博客
05-10 695
MobX是react的状态管理库之一。相比Redux，mobx则更加简洁, 更符合对store增删改查的操作概念。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值