First, paste the version

Create a store file in the home directory

Store /index.js is another JS file imported from the store directory

import Breadcrumb from './breadcrumb';
import UI from './ui';
export default {  Breadcrumb,  UI};
Copy the code

Using store/ui.js as an example, mobx uses:

1. @Observable defines variables

2. @action defines methods

3, runInAction, async await processing asynchronous requests

import { observable, action, configure, runInAction } from 'mobx'; import loginApi from 'api/login'; configure({ enforceActions: 'observed' }); Class UI {// Get message @Observable willExpirationList = []; @observable tipVisible = false; @action getWillExpirationList = async () => { let data = await loginApi.getWillExpirationList().then((res) => { return res.data.data; }); runInAction(() => { this.willExpirationList = data; }); }; // Hide @Observable collapsed = false; @action toggleCollapsed = () => { this.collapsed = ! this.collapsed; }; @action reset() { this.collapsed = false; } } const ui = new UI(); export default ui;Copy the code

3, import store in import file

// mobx import { Provider } from 'mobx-react'; import store from 'store/index'; ReactDom.render( <AppContainer> <Provider {... store}> <RootElement /> </Provider> </AppContainer>, document.getElementById('app') );Copy the code

Use in the class component

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;
Copy the code

Used in functional components

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)));
Copy the code

Tip: When the Observer needs to combine other decorators or higher-order components, make sure the Observer is the deepest (first applied) decorator, otherwise it may do nothing.

The end.