Model 对象

相关概念

• namespace: 当前 Model 的名称。整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成
• state: 该 Model 当前的状态。数据保存在这里，直接决定了视图层的输出
• reducers: Action 处理器，处理同步动作，用来算出最新的 State
• effects：Action 处理器，处理异步动作

namespace

区分不同的model，以namespace 为当前model的key，在页面取出state数据的时候，会用到。
如：

示例1：state为对象

示例1

示例1

示例2：state为字符串

示例2

使用webpack require.context 来初始化多个model，优化代码

前言

在index.js中，如果多个model直接写在index，很难看，而已，会使index文件变得比较大。

解决：
增加一个model入口文件，把相关的model直接在入口文件导入；项目src/index.js只要导入model的入口文件，即可。

步骤

1：index.js打印出对应的Model

常规写法，model的值，作为参考。

index.js打印出对应的Model

2：model/index.js代码，主要利用 webpack require.context

思路：通过model下除了index.js的其他文件名，再获取文件对应的上下文，导出。

model/index.js

对应打印的结果

拓展：获取指定目录下的文件名
webpack，require.context：（详细参考官网）

说明：

const context = require.context('./', false, /\.js$/);

第一个参数：表示需要操作的目录。（./：当前目录，也就是model目录下）
第二个参数：表示是否需要操作子目录，false表示不需要。（这里表示只在model根目录在操作）
第三个参数：表示要操作文件的正则规则。（/\.js$/：这里表示匹配后缀为.js的文件）

参考：https://webpack.js.org/guides/dependency-management/#context-module-api

3：在src/index进行遍历导出的结果
根据model/index.js导出的结果集，循环遍历取出结果。

src/index.js结果

说明：

// 3. Model
// app.model(require('./models/example').default);
// app.model(require('./models/products').default);
// app.model(require('./models/counter').default);

// require('./models').default  获取models/index 默认导出的数组值
// .forEach(element => app.model(element.default)) 遍历每个元素对象
// element.default 再获取每个每个元素，默认导出的值
// 其实：app.model(element.default) === app.model(require('./models/counter').default)
require('./models').default.forEach(element => app.model(element.default)); // index可以省略
// require('./models/index').default.forEach(element => app.model(element.default));

console.log(require('./models').default);

打印require('./models').default：
结果跟model/index.js默认导出的结果一致。需要再遍历取出每个元素对应的default值，才是最后要的结果。

require('./models').default

参考：

https://dvajs.com/guide/introduce-class.html#model-%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BE%8B%E5%AD%90