master

master 包主要负责状态数据的存储，权限校验与重定向、顶层路由处理、多语言等工作。所有的 remote 模块都会经过 master 代码控制然后渲染。

> 目前未添加权限，多语言模块，如有需要可自行在master添加。

全局的事件触发，通用数据也都可以添加到 master 内，并且这些数据共享，可完成不同模块间数据通信。

store

masterStore 是通过 mobx 进行实现的状态数据池，它可以存储一些全局动态的状态数据，并且在所有 remote 模块中都可以访问到这些数据。

源码

masterStore 的核心代码如下，用于注册一个 Store

``tsx
import React from 'react';
import {observer, useLocalObservable} from 'mobx-react';
import {runInAction} from 'mobx';
import { Provider } from 'mobx-react';

interface IIssue {
// data
}

const useMainLocalStore = () => {
const masterStore = useLocalObservable(() => ({
data: {} as IIssue,
get(key: string) {
return masterStore.data[key]
},
set(key, value) {
runInAction(function () {
masterStore.data[key] = value
})
}
}));
return masterStore;
};

const MasterStoreProvider: React.FC = observer((props) => {
const {children} = props;
const masterStore = useMainLocalStore();
return {children};
});

export {MasterStoreProvider};
`

包裹跟节点

`jsx
import React from 'react';
……
import {MasterStoreProvider} from './store';
……
const InnerIndex = (props) => {
const {match, AutoRouter} = props
return (

……

)
};

export default withRouter(InnerIndex);
`

使用

可以实现不同 remote 模块间数据通信，也可以使得一个模块触发另一个模块的视图渲染。

测试案例如下：

开启一个 app1 服务作为 host 模块，它可以以一下两种方式访问 remote 模块，一种访问其中 remote 模块注册的一个组件，第二种访问整个的 remote 模块，详情也可查看 app1 与 app2 包的代码。

app1 作为 host 模块

`jsx
import React from 'react';
import {ExternalComponent} from '@microup/utils';
import {inject, observer} from 'mobx-react';

export default inject('masterStore')(observer((props) => {
const {history, masterStore} = props
return (


`jsx
import React from 'react';
import {observer,inject} from 'mobx-react';

export default inject('masterStore')(observer(({match, masterStore}) => {
return (

`jsx
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import {inject} from 'mobx-react';
import {ErrorPage} from '@microup/master';

const Page1 = React.lazy(() => import('./routes/Page1'));
const Page2 = React.lazy(() => import('./routes/Page2'));

function Index({match, masterStore}) {
return (

${match.url}/page1} component={Page1}/>
${match.url}/page2} component={Page2}/>
${match.url}} component={Page1}/>


);
}

export default inject('masterStore')(Index);
`

app2 page1

`jsx
import React from 'react';
import {inject, observer} from 'mobx-react';

export default inject('masterStore')(observer((props) => {
const {match, masterStore} = props
return (