【教程】Pastate.js 响应式 react 框架（六）多模块应用

这是 Pastate.js 响应式 react state 管理框架系列教程，欢迎关注，持续更新。

Pastate.js Github 欢迎 star。

这一章，我们将讲解在 pastate 应用中多模块应该如何协作。

store 被多模块消费

在多模块应用中，有些组件的视图需要引用多个模块的 store 假设有个比较复杂的应用的模块依赖关系如下：

view 与 store 多对多依赖关系

Module1 和 module2 是最普通的模块，其 store1 和 store2 只被自身的 view1 和 view2 依赖使用；
Module3 具有一些信息需要在其他模块同步显示，如聊天列表要告诉导航栏目前多少条未读信息，其 store3 还被 view2 引用；
Module4 是系统的公用模块，如登录模块，其状态要被其他模块获知。

模块之间的互相依赖分为两种：

state 依赖：需要使用到其他模块的 state, 如根据是否已登录实现不同的视图渲染逻辑或做不同的 action 处理
actions 依赖：需要触发其他应用的 actions, 如触发登录模态窗或通知模态窗

因此，在多模块应用中，我们先把各个模块的 store 连接一棵 store 树, 如下：

store 树

然后指定各 component 引用这颗 store 树的哪些（一个或多个）节点的 state，生成 Container：

使用多个 store 的数据

构建 storeTree 并引用其节点

我们先把上一章的 StudentPanel 板块改为 storeTree 模式。
首先，在 src/index.js 中创建一个 store 树, 我们在 pastate 中使用普通的对象模式来描述 store 树：

...
import * as StudentPanel from './StudentPanel';

const storeTree = {
    student: StudentPanel.store 
}
...

这样，就成功地把 StudentPanel 模块的 store 挂载到 storeTree 的 student 节点，然后在 makeApp 函数中把原来的 StudentPanel.store 改为 storeTree:

...
ReactDOM.render(
    makeApp(<StudentPanel.view />, storeTree), 
    document.getElementById('root')
);
...

接着，我们在 StudentPanel.view.jsx 中指明该视图组件引用的 storeTree 的节点：

class StudentPanel extends React.PureComponent {
    ...
}
export default makeContainer(StudentPanel, 'student')

我们在 makeContainer 函数的第二个参数中对引用的节点路径进行指定。

接下来，我们来创建班级信息管理系统的第二个模块课程模块。与 StudentPanel 类似，我们创建一个 ClassPanel 文件夹来保存该模块的文件，文件夹的文件目录如下：

ClassPanel
- ClassPanel.model.js
- ClassPanel.view.js
- ClassPanel.css
- index.js

同样，在 ClassPanel.view.js 中我们指定把组件连接到 storeTree 的节点 'class':

class ClassPanel extends React.PureComponent{
    ...
}
export default makeContainer(ClassPanel, 'class')

对应地，我们在 src/index.js 中需要把 ClassPanel.store 挂载到 storeTree 的 'class' 节点:

...
import * as ClassPanel from './ClassPanel';

const storeTree = {
    student: StudentPanel.store,
    class: ClassPanel.store
}
...

你可以在 makeApp 时把之前的 StudentPanel.view 改为 ClassPanel.view 来预览 ClassPanel 模块：

课程信息模块

Pastate 的 storeTree 支持多层管理模式，你可以使用下面的格式创建多层嵌套的 storeTree：

...
const storeTree = {
    student: StudentPanel.store,
    class: ClassPanel.store,
    common: {
        login: LoginPanel.store,
        inform: InformPanel.store,
    }
}
...

在容器定义中，你可以简单的 '.'点格式来指明对这些多层嵌套内的 store 节点的引用：

export default makeContainer(LoginPanel, 'common.login')

export default makeContainer(InformPanel, 'common.inform')

多模块组合

在实际应用中，我们一般会使用一个具有 “导航属性” 的容器作为根容器来控制应用多个模块的显示，在我们的班级信息管理系统中就是导航栏模块 Navigator ：

导航窗模块

我们同样创建一个 Navigator 模块的文件夹，在 Navigator.model.js 中，我们这样定义应用的 state 结构, 并且定义一个 action 来修改选中的标签:

import { createStore } from 'pastate';

const initState = {
    /** @type {'student' | 'class'} */
    selected: 'student'
}

const actions = {
    /** @param {'student' | 'class'} tab */
    selectTab(tab){
        state.selected = tab
    }
}
...

在 Navigator.view.jsx 中，我们引入另外两个模块的视图容器，并根据 state.selected 的值进行渲染，同时我们定义导航按钮的响应 action：

...
class Navigator extends React.PureComponent{
    render(){
        /** @type {initState} */
        const state = this.props.state;
        return (
            <div>
                <div className="nav">
                    <div className="nav-title">班级信息管理系统</div>
                    <div className="nav-bar">
                        <span 
                            className={"nav-item" + (state.selected == 'student' ? " nav-item-active" : "" )}
                            onClick={() => actions.selectTab('student')}
                        >
                            学生
                        </span>
                        <div 
                            className={"nav-item" + (state.selected == 'class' ? " nav-item-active" : "" )}
                            onClick={() => actions.selectTab('class')}
                        >
                            课程
                        </div>
                    </div>
                </div>
                <div className="main-panel">
                {
                    state.selected == 'student' ?
                        <StudentPanel.view />
                        :
                        <ClassPanel.view />
                }
                </div>
            </div>
        )
    }
}
export default makeContainer(Navigator, ’nav')

接着，我们把 Navigator.store 挂载到 storeTree，并把 Navigator.view 作为根容器渲染出来：

src/index.js

const storeTree = {
    nav: Navigator.store,
    student: StudentPanel.store,
    class: ClassPanel.store
}

ReactDOM.render(
    makeApp(<Navigator.view />, storeTree),
    document.getElementById('root')
);

基本完成，我们可以到浏览器看看效果！

使用其他模块的 state

我们还差最后一个功能，在导航栏显示学生和课程数量：

在导航栏显示学生和课程数量

这时，我们遇到了要在一个模块里使用其他模块的 state 情况!

假设没有 storeTree, 我们一般会想到 “冗余数据” 方法来实现这个功能：在 Navigator 模块的 state 中定义两个值来分别表示学生数和课程数，并定义对应的修改方法供其他模块来修改这两个值，大致如下：

const initState = {
    /** @type {'student' | 'class'} */
    selected: 'student',
    studentCount: 0, 
    classCount: 0
}

const actions = {
    /** @param {'student' | 'class'} tab */
    selectTab(tab){
        state.selected = tab
    },
    // 供其他模块调用
    updateStudentCount(count){
        state.selected = tab
    },
    // 供其他模块调用
    updateStudentCount(count){
        state.selected = tab
    }
}

如果你不是使用 pastate 或 redux 等独立于 react component 的 state 管理管理框架，在多个组件互相配合联动时或许不得不使用这种模式。但这种模式具有较大的缺陷：当应用日益复杂，你会发现当你做一个简单的操作后，需要去更新很多相关的冗余数据，而且，你很容易忘了去完备地更新冗余数据或重复更新冗余数据。这样一来，应用变得难以开发、修改和维护。

因此，我们需要使用 “唯一数据源 (SSOT, Single source of truth)” 模式来实现多组件的协作，pastate 的 storeTree 正是唯一数据源模式的一种实现方式。

基本原理：学生和课程的数量信息在学生和课程板块已经包含，如果有哪个地方需要用到这些数量信息，则在那个地方通过 “唯一源数据” 来 “引用” 或 “计算” 出来。

实现方式：我们不在 Navigator 的 store 中定义这些数量信息并实现数据同步逻辑，而是直接在 storeTree 中把数量信息引用或计算出来，我们修改 Navigator.view.js 的 makeContainer 函数的参数：

...
export default makeContainer(Navigator, state => ({
    state: state.nav,
    studentCount: state.student.students.length,
    classCount: state.class.classes.length
}))

makeContainer 的第二个参数其实是一个 state-props 映射器 (mapper), 你可以通过一个映射函数来定义把 store 树的某些 state 节点映射到 Navigator 组件的 props 上。我们之前使用的 makeContainer(Navigator, 'nav') 是一种简写，等价于下面的形式：

makeContainer(Navigator, state => ({
    state: state.nav
}))

定义 state-props 映射后，我们在组件中这样简单地获取 props 中映射入的值：

class Navigator extends React.PureComponent{
    render(){

        const state = this.props.state;
        const studentCount = this.props.studentCount;
        const classCount = this.props.classCount;
  
        // 或者使用对象展开语法一起获取
        const {state, studentCount, classCount} = this.props;

        return (
            <div>
                 ...
            </div>
        )
    }
}

这种模式直接从唯一数据源获取 / 计算出与其他模块的 state 相关的数据，使我们避免了容易出问题的“冗余数据” 模式。Pastate 模块机制包含了按需渲染引擎，当且仅当任何一个以上的 props "根属性" 节点的值改变时，pastate 会且才会触发组件视图进行重新渲染。

缓存 storeTree 的衍生数据

我们把从唯一数据源通过组合或计算出的数据称为 storeTree (stateTree) 的衍生数据。如果你使用下面的模式映射 Navigator 组件的 props, 在每次学生和课程的元素内部发生改变但学生和课程数量都没有改变时，也会触发 Navigator 组件的渲染动作：

export default withRouter(makeContainer(Navigator, state => ({
    state: state.nav,
    count: {
        student: state.student.students.length,
        class: state.class.classes.length
    }
})))

如果采用这种写法，每次计算生成 count 属性时，都会动态计算出一个匿名的 {student:..., class:...} 对象，假设 count 属性的计算逻辑比较消耗资源，或者 Navigator 的渲染逻辑比较消耗资源的情况下，这会使应用的性能变差。Pastate 实现了一个衍生数据的缓存工具makeCacheable ，可用来创建可记忆的衍生数据：

import { makeContainer, makeCacheable } from 'pastate';

// getCount 是一个具有记忆功能的 {student:..., class:...} 对象生成器 / 或称为选择器
const getCount = makeCacheable((studentLength, classLength) => ({
    student: studentLength,
    class: classLength
}))

export default makeContainer(Navigator, state => ({
    state: state.nav,
    count: getCount(
        state.student.students.length, 
        state.class.classes.length
    )
}))

makeCacheable 函数参考了函数式编程(Functional programming)的理念，它可以把一个普通计算函数转化为一个具有缓存记忆功能的纯函数(Pure function)，然后当我们在映射 props 值时，把 “计算式” 替代为 “纯函数” (记忆函数)。当调用记忆函数的参数与上一次调用的参数一样时，记忆函数会直接绕过逻辑运算，直接返回上一次计算的结果；当调用记忆函数的参数发生改变时，它才会运行原函数的运算逻辑重新生成一个新的结果，把其缓存起来，并返回新的结果。

使用 makeCacheable 有两个好处：

省略计算过程：在我们的班级系统例子中，假设我们要衍生出一个男生数组，如果我们直接进行 map：

const mapper = state => ({
  boys: state.student.students.map( student => student.isBoy == true)
})

那么当学生模块的 state.selected 的值发生改变时（在实际使用过程中，这种操作会频繁发生改变），都会重新触发数组 map 函数的运行，这是一个性能隐患。我们引入 makeCacheable 可以避免这个问题：

const getBoys = makeCacheable(students => students.map( student => student.isBoy == true))

const mapper = state => ({
  boys: getBoys(state.student.students)
})

保持对象或数组结果的引用：还是这个衍生出男生数组的例子，如果不使用 makeCacheable，那么即使 state.student.students 不变，每次计算出的 boys 数组的引用是不一样的，都会触发组件重新渲染；如果使用 makeCacheable，那么只要 state.student.students 不变，计算出的 boys 数组的引用是一样的，不会触发组件进行不必要的渲染。

Pastate 的 makeCacheable 函数的功能与 reselect 库的基础功能类似。如果 makeCacheable 不能你的需求，可以看看 reselect 库。

调用其他模块的 actions

如果在你的应用存在公共模块，如登录模态窗、提示模态窗等，那么你会有这个需求：在多个模块的 actions 引用或改变公共模块的 state，如：

根据是否已登录，做不同的 actions 逻辑处理（引用其他模块的 state）
在其他模块触发登录模态窗让用户进行登录（修改其他模块的 state）

当应用非常简单时, 可以直接把公共模块的 store 引入到其他模块的 actions 中使用：

import { store as loginStore } from '../LoginPanel'
const loginState = loginStore.state;

const actions = {
    handleBtn1Click(){
        if(loginState.isLogined){
            ...
        }
    }
    handleBtn2Click(){
        loginState.modelOpened = true
    }
}

这种形式虽然可行，但导致应用难以管理，特别是当应用逐渐复杂时：

你很容易不知道公共 state 在哪里被如何改变了；
当你需要更新公共 state 的定义时，需要同时去更新多个模块中引用到该 state 的 actions 。

这使得模块之间的耦合性增强，使得应用难以升级维护。特别是当不同模块是由不同开发者开发的时候，管理这个应用简直就是恶梦。

Pastate 使用面向对象的封装思维，把模块看成是一个抽象的对象，把模块的 state 看成是其私有（private）成员，只有在模块内部才可以直接访问和修改。如果其他模块的 actions 需要引用或修改本模块的 state, 需要把相关的引用或修改逻辑封装在本模块的 actions 或 actions.public 中，供其他模块调用：

// LoginPanel.model.js

const initState = {...}

// 1. Pastate 建议把公用操作或调用放在 actions.public 节点中,
// 这样既方便管理，又方便其他模块调用，同时还会得到 pastate 相关中间件的功能支持

// 2. Pastate 建议把对 actions.public 中的每一项使用 jsDoc 做比较详细的注释

const actions = {
    handleClick(){ ... },
    public:{
        /** 打开登录面板 */
        openLoginModal(){ ... }, 
        /** 
         * 获取登录状态 
         * @return {boolean} 表示是否已登录
         */
        isLogined(){ return state.isLogined } 
    },
    mutations:{
        ...
    }
}

// OtherPanel.model.js

import { actions as loginActions } from '../LoginPanel'

const actions = {
    handleBtn1Click(){
        if(loginActions.public.isLogined()){
            ...
        }
    }
    handleBtn2Click(){
        loginActions.public.openLoginModal()
    }
}

这种 public actions 模式定义了一种对于 state 的外部访问和操作的授权机制；每个 state 的外部访问和操作的具体实现都是在模块自身内部完成的，增加了模块的内聚性；且每个 state 的外部访问和操作都有具体的命名，使多模块协作的条例更加清晰。

其实，public actions 是一种 “面向接口(Interface))编程” 或 “面向协议(Protocol))编程” 的设计模式。外部模块只需把接口当成一种抽象的模块间通讯方式，模块外部只需要知道当前模块通讯接口的功能和参数/返回值，不需要知道接口内部的实现逻辑。

下一章，我们将介绍如何在 pastate 中使用路由等功能来实现大规模的应用程序。

【教程】Pastate.js 响应式 react 框架（六）多模块应用

store 被多模块消费

构建 storeTree 并引用其节点

多模块组合

使用其他模块的 state

缓存 storeTree 的衍生数据

调用其他模块的 actions

李伟鹏

引用和评论

分享一个高颜值的技术社区 HackerTalk黑客说

一些react使用小技巧（中）

一些react使用小技巧（下）

Vue.js-方法与事件

深入浅出React中的refs

startViewTransition的简单示例

Mobx学习