react+mobx+mobx-react使用总结

·  阅读 606

一、先贴下版本

二、主目录新建store文件

store/index.js是引入store目录下的其他js文件

import Breadcrumb from './breadcrumb';
import UI from './ui';
export default {  Breadcrumb,  UI};
复制代码

以store/ui.js 为例,mobx详细使用:

1、@observable 定义变量; 2、@action 定义方法; 3、runInAction,async await  处理异步请求。

import { observable, action, configure, runInAction } from 'mobx';
import loginApi from 'api/login';
configure({ enforceActions: 'observed' });
class UI {
  // 获取消息
  @observable willExpirationList = [];
  @observable tipVisible = false;
  @action getWillExpirationList = async () => {
    let data = await loginApi.getWillExpirationList().then((res) => {
      return res.data.data;
    });
    runInAction(() => {
      this.willExpirationList = data;
    });
  };
  // 左侧展示隐藏
  @observable collapsed = false;
  @action toggleCollapsed = () => {
    this.collapsed = !this.collapsed;
  };
  @action reset() {
    this.collapsed = false;
  }
}
const ui = new UI();
export default ui;
复制代码

三、在入口文件引入store

// mobx
import { Provider } from 'mobx-react';
import store from 'store/index';

 ReactDom.render(
  <AppContainer>
    <Provider {...store}>
      <RootElement />      
    </Provider>    
  </AppContainer>, document.getElementById('app')  );
复制代码

四、class组件中使用

import React from 'react';
import { observer, inject } from 'mobx-react';
import { Menu } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import cx from 'classnames';
@inject('UI')
@observer
class LeftMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  toggleCollapsed = () => {
    this.props.UI.toggleCollapsed();
  };
  render() {
    const { collapsed } = this.props.UI;
    return (
      <div className={cx({ 'left-menu': true, 'left-menu-collapsed': collapsed === true })}>
        <div className="open-menu" onClick={this.toggleCollapsed}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
        </div>
        <Menu mode="inline" theme="dark" inlineCollapsed={collapsed} inlineIndent={15}></Menu>
      </div>
    );
  }
}
export default LeftMenu;
复制代码

五、函数式组件中使用

import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Menu } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import cx from 'classnames';
const LeftMenu = (props) => {
  const { collapsed } = props.UI;
  const toggleCollapsed = () => {
    props.UI.toggleCollapsed();
  };
  return (
    <div className={cx({ 'left-menu': true, 'left-menu-collapsed': collapsed === true })}>
      <div className="open-menu" onClick={toggleCollapsed}>
        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
      </div>
      <Menu mode="inline" theme="dark" inlineCollapsed={collapsed} inlineIndent={15}></Menu>
    </div>
  );
};
export default withRouter(inject('UI')(observer(LeftMenu)));
复制代码

小贴士: 当 observer 需要组合其它装饰器或高阶组件时,请确保 observer 是最深处(第一个应用)的装饰器,否则它可能什么都不做。

结束。

分类:
前端
标签: