Scratch3.0 二次开发——引入 dva

概述

Scratch3.0 二次开发系列，系列说明、Demo源码等请查看：《Scratch3.0 二次开发——开篇》

这次核心介绍如何在 gui 项目中引入 dva 作为数据管理，用过 redux、redux-saga 的同学应该都被一堆的“模板代码”弄晕过，一个简单的功能，要在几个文件中定义模板字符串、产生各种基本一样的模板代码。dva 可以简化这个流程，让 redux 的数据管理用起来更简洁。

实现细节

PS：以下修改均在 demo-scratch-gui 项目中

安装依赖库

npm install dva-core dva-loading --save

新增 src/utils/dva.js

import { create } from 'dva-core';
import createLoading from 'dva-loading';

let app;
let store;
let dispatch;
let registered;

/**
 * 创建一个 dva app 对象
 * @param {Object} opt 详细参数可见： https://dvajs.com/api/#dva-api
 * @returns
 */
function createApp(opt) {
    app = create(opt)
    app.use(createLoading({}))

    if (!registered) {
        opt.models.forEach(model => app.model(model));
    }

    registered = true;
    app.start();

    store = app._store;
    app.getStore = () => store;
    app.use({
        onError(err) {
            console.log('dva-err :>> ', err);
        },
    });

    dispatch = store.dispatch;
    app.dispatch = dispatch;

    return app;
}

export {
    createApp,
    dispatch,
    app,
};

我们只引入 dva 的核心部分，对于其它路由相关的功能我们项目暂时用不上，所以就不引进来，避免混乱。

新增 models 目录

新增 models 目录，并新增以下三个文件：

1. src/models/index.js
   • 作为入口文件，后续所有新增的 model 都需要在里面引入
2. src/models/global.js
   • 存放项目的全局变量，留着以后备用
3. src/models/template.js
   • 里面定义了一些 model 的模板代码，后续新增 model 可以直接复制这个文件

修改 src/lib/app-state-hoc.jsx 中 store 的引入方式

以上，既保留了原本 redux 定义在 store 中的内容，又新加了 dva 中定义的 store

PS：上面引入方式用了别名的方式，可以在 webpack.config.js 的 resolve 字段中添加定义：

resolve: {
    symlinks: false,
    extensions: ['.js', '.json', '.jsx'],
    alias: {
        '@': path.resolve(__dirname, './src'),
    },
},

最终运行效果可以在 redux的调试工具 中观察：