相关概念
- 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
网友评论