spaassy-redux v1.0.0

spaassy-redux 是spaassy的核心依赖。基于react-redux并对其进行了改写。

spaassy-redux对外暴露以下API：

• AsyncComponent

AsyncComponent是一个函数，这个函数会接受一个字符串参数，然后返回一个异步加载组件。主要是用于spaassy项目中react组件懒加载。

返回的懒加载组件外层会有一个以参数命名className的div，之所以这么做，是为了方便开发者对组件样式做隔离，防止样式污染。你也可以不传参数，这样返回出来的组件就没有外层div。

示例：

import {
    AsyncComponent
} from 'spaassy-redux'

let AsyncComp = AsyncComponent('home')

const routers = [{
        path: '/',
        exact: true,
        component: AsyncComp(() => import('@views/home/demoOne'))
    },
    {
        path: '/demoTwo',
        component: AsyncComp(() => import('@views/home/demoTwo'))
    }
]

export default routers

• SpaAssyProvider

SpaAssyProvider 的作用是替代react-redux 的Provider 组件。spaassy-redux内部改写了bindActionCreators、combineReducers、createReducer、promiseMiddleware，并集成到了SpaassyProvider 组件当中。所以你不需要另外再配置和执行以上四个函数。

SpaAssyProvider 有以下几个参数：

示例：

import React from 'react';
import ReactDom from 'react-dom';
import App from '@views/app';
import { SpaAssyProvider } from 'spaassy-redux'
import 'lodash'
import './common';

import rootReducers from '@store'

const appEle = document.getElementById('app');
const namespace = process.env.SYSTEMNAME

ReactDom.render(
    <SpaAssyProvider
        rootReducers={rootReducers}
        namespace={namespace}
        mainProject
    >
        <App />
    </SpaAssyProvider>,
    appEle
);

if (module.hot) {
    console.log('启用热加载更新！')
    module.hot.accept();
}

• SpaAssyConnect

SpaAssyConnect 是一个函数，接受一个字符串类型参数，返回一个装饰器函数。 返回的装饰器函数用来绑定组件与store中的数据。

示例：

import React from 'react';
import { SpaAssyConnect } from 'spaassy-redux'
import { setTest } from '@store/test/test_action'

import './index.less'

const namespace = process.env.SYSTEMNAME

@SpaAssyConnect(namespace)(state => ({ store: state }), { setTest: setTest })
class Home extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {

        return (
            <div className="homeContent">{this.props.store.testReducer.str}
            </div>
        )
    }
}

export default Home;

示例中，执行

const namespace = process.env.SYSTEMNAME
SpaAssyConnect(namespace)

返回的是一个装饰器函数，这个函数内部接收两个参数：

SpaAssyProvider 中为了系统store 数据隔离使用了nameSpace， 它会在初始化数据的时候为每一个系统生成一个命名空间。所以当你用SpaAssyConnect 绑定数据的时候也需要传入一个nameSpace 来指明你是要哪个命名空间内的数据。nameSpace 可以指明一个，也可以传递多个，这样在微前端应用中一个子系统可以获取其它子系统或是portal系统中的数据。但是，nameSpace 参数为多个的情况下，第一个nameSpace 必须是本系统的nameSpace，因为dispatch 是以第一个nameSpace 去触发aciton的， 本系统只能修改store 内部本系统的数据。

• SpaAssyRegister

SpaAssyRegister 是一个class类，提供子系统将路由组件和reducer注入到portal系统的方法。也给portal系统提供获取子系统路由和reducer的方法：

子系统路由、reducer注册示例：

import {
    SpaAssyRegister
} from 'spaassy-redux'
import reducers from '@store'
import routers from '@/views/rootRouters'

// example:
const namespace = process.env.SYSTEMNAME

let option = {
    namespace: namespace,
    routers: [...routers],
    reducers: {
        ...reducers
    }
}
const spaassyRegister = new SpaAssyRegister(option)

spaassyRegister.addRouters()
spaassyRegister.registerReducer()

portal系统获取子系统路由示例：

import { AsyncComponent } from 'spaassy-redux'
import rootRouters from '@views/rootRouters'
import {
    SpaAssyRegister
} from 'spaassy-redux'

const spaassyRegister = new SpaAssyRegister()

const subRouters = spaassyRegister.getRouters()
let subRouterList = []
Object.keys(subRouters).map(o => {
    subRouterList.push(...subRouters[o])
})

const routers = [
    // ...rootRouters,
    ...subRouterList
]

export default routers

spaassyRegister 类的方法：