Action-mediator NPM

actionMediator ——跨组件通信方案

是什么

当前的业务架构，无法解决跨组件间的状态同步。actionMediator 能够更优雅地处理跨组件的方法调用。

场景：

账号详情页和账号列表页，渲染数据源不一样，当详情页编辑后，需要更新列表页；虽然详情页可以调用获取列表数据的方法，但是无法获取到当前列表页分页参数和查询条件，此时仍需由列表页保持当前查询条件调用相应接口。

世界观

actionMediator 的世界里，只有两种角色，一个是 Mediator 中介者，另一个是 Colleague 成员。

Colleague：组件实例的描述，包括组件的实例，组件公开的方法。以成员名作为唯一标志，成员名默认是这个组件的名称，也支持自定义
Mediator：用于管理成员间的消息传递。Colleague 注册后，Mediator 能够获得这个成员的信息，当需要调用某个 Colleague 的方法时，可以通知 Mediator 去找到对应的 Colleague

使用方法

@colleague(colleagueName) : 注册为成员,参数 colleagueName 是必选的成员名
@@colleagueAction(actionName): 声明公开的方法，actionName 是方法标志
@notifyMediator(colleagueName, actionName)：通知中介，让名为 colleagueName 的成员执行 actionName 这一公开的方法

举个例子：

@colleague('AccountManageTab')
class AccountManageTab extends React.Component<PropsTypes> {
	...
	@colleagueAction('updateAccountList')
	searchAccounts(params?: AccountManageModel.AccountQueryParam) {
		this.queryParam = {...this.queryParam, ...params};
		AccountManageState.fetchAccountPagingList(this.queryParam);
	}
	...
}

@colleague()
class AccountInfo extends React.Component<PropsTypes> {
    @notifyMediator('AccountManageTab', 'updateAccountList')
	addAccount(newAccount: AccountManageModel.Account) {
		return AccountManageState.fetchAccountAdd(newAccount)
	}
}

效果：当 AccountInfo 增加完账号时，AccountManageTab 会执行 searchAccounts，更新账号列表