基于mobx状态管理的React class组件

1. class组件定义

import {inject, observer} from 'mobx-react';
import cssModules from 'react-css-module';

import MainStore from '@/..';
import styles from '@/..';
import SubStore from '@/..';
import {TypeA} from '@/typing';
 
 interface InterfcAProps {
     store?: MainStore;
     location?:any;
     ... 
 }
 
 @inject('store')
 @observer
 @cssModules(styles)
 export defefault class CompA extends React.Component<InterfcAProps, {}>{
      private data: SubStore;
      public constructor(props:PropsModel){
          super(props);      
          this.data = this.props.store!.subStore; 
      }
      
      public render(){
          return (
              <div>
              {...}
              </div>          
          );
      }
 }
              

2. 全局store定义：

import {observable} from 'mobx';

import SubStore1 from '@/..store';
import SubStore2 from '@/..store';
 
 export default class MainStore{
     @observable
     public subStore1:  SubStore1;
     public subStore2:  SubStore2;
     
     public constructor(){
         this.subStore1 = new SunStore1(this);     
         this.subStore2 = new SunStore2(this);   
     }
 }
              

3. store的注入：

index.tsx中：

import {ConfigProvider} from 'antd';
 
const store = getStore();

React.render(
<ConfigProvider>
    <Provider store = {store}>
    	<MainLayout/>
    </Provider>
</ConfigProvider>    
>, document.getElementById('root');
              

getStore()方法：

import MainStore from '@/..';

let store: any = null;

export function getStore(){
    if(!store){
        store = new MainStore();    
    }
    return store;
}