react通过mobx实现全局状态管理

程序员文章站 2022-07-05 18:17:54

...

vue 里通过 vuex实现全局状态管理，在react里可以通过redux或者mobx也可以实现全局状态管理；但是通过查看文档，发现redux调用过程有些繁琐,对于一些小白来讲，使用起来有些吃力今天通过简单的demo来介绍使用mobx；

首先安装依赖

yarn add mobx mobx-react

此demo主要用到的东西 observer observable action
目录结构如图，这里只截取两个文件的代码；
react通过mobx实现全局状态管理
store的内如如下：

import {observable, action } from 'mobx'

class AppState {
　　　// 装饰器@
  @observable timer = 0

  @action
  resetTimer() {
    this.timer = 0;
  }

  @action
  increase() {
    this.timer++;
  }

  @action
  decrease() {
    this.timer--;
  }
}
// 将类实例化，后再暴露, 也可以先导出再在组件使用时再实例化
const appState = new AppState()

export default appState;

这是一个常规的计数器

下面是Home的内容

import React from 'react';
import { Row,Button,Col } from 'antd';
import './index.less';
import appStore from '../../store/index'
import { observer } from 'mobx-react';

@observer
class Home extends React.Component {

    render() {
        const store = appStore;
        return (
            <Row className='homeMain'>
                <p>这里是测试的store </p>   
                <h1>{store.timer}</h1>
                <Col span={6} className='time'>
                    <Button type="primary" onClick={()=>store.decrease()} size={'large'}>minus</Button>
                </Col>
                <Col span={6} className='time'>
                    <Button  type={'danger'} onClick={()=>store.resetTimer()} size={'large'}>reset</Button>
                </Col>
                <Col span={6} className='time'>
                    <Button type="primary" onClick={()=>store.increase()} size={'large'}>add</Button>
                </Col>
            </Row>
        )
    }
}

export default Home

其实主要就是通过observable 监控一个变量；
通过action改变变量；
通过observer 观察的视图在状态改变后会触发视图更新；

页面的效果如下
react通过mobx实现全局状态管理
通过 add minus reset 来改变数值
一个简单的全局状态管理就实现了。