背景
对于dva这个开发框架，国内从事react的前端工程师多半不会感到陌生，dva完善的开发体系和简单的api，让其被广泛运用到实际工作中。我所在的公司也是长期使用dva作为基础的开发框架，虽然好用，但是随着前端技术的飞速发展，dva似乎陷入停滞了，从npm官网上看其发版情况看，正式版本2.4.1是三年前发布的，最近一次是2.6.0-beta.22版本，也是半年前发布的，因此 附录【2】文章中指出dva未来不确定性高的隐患。除此之外，关于dva的effect是否能支持async/await的讨论(见附录【1】链接)，也暴露出dva在扩展性的短板。
为啥要造轮子
上面简单说了一下dva目前的情况，本文的出发点也就是在dva的effect不支持async/await的问题上，用过dva的都清楚，dva的model层采用generator进行流程控制，虽然功能强大，但开发体验跟async/await比起来还是差了些，因此我就想实现一版支持async/await的mini-dva，其他研发流程尽量和dva保持一致。
轮子对比
从这里开始，我们就造一个支持async/await的mini-dva吧，取个正式的名字就叫 mini-async-dva ，废话不说了，先看一下mini-saync-dva和dva的一个具体对比吧：
1.路由文件
## dva
const Foo = dynamic({
app,
models: () => [import('./models/foo')],
component: () => import('./pages/Foo'),
});
......
<Route path="/foo" component={Foo} />
......
## mini-async-dva
import Bar from './pages/Bar';
......
<Route path="/bar">
<Bar />
</Route>
......
2.models
## dva
export default {
namespace: 'foo',
state: {
list: []
},
effects: {
* fetchList({ payload }, { call }) {
yield call(delay, 1000);
}
}
};
## mini-async-dva
export default {
namespace: 'foo',
state: {
list: []
},
effects: {
async fetchList(payload, updateStore) {
await delay();
}
}
};
3.view层
## dva
import React from 'react';
import { connect } from 'dva';
@connect((state) => {
return state.bar;
})
class Bar extends React.Component {
......
}
export default Bar;
## mini-async-dva
import React from 'react';
import model from '@/model';
@model('bar')
class Bar extends React.Component {
......
}
export default Bar;
通过上面代码的对比，发现mini-async-dva最大的特点就是model的effect支持async/await语法，路由组件默认就是异步导入，不必再使用dynamic进行包裹了，当然还有视图层与model的绑定，也做了一点小优化，代码过后，就开始分析一下轮子咋实现的吧。
轮子实现
1.store管理
我们这个轮子还是沿用redux作为状态管理，但是由于需要动态注册model对象，因此需要手动接管reducer里面的逻辑，比如当/foo路由第一次激活时，Foo组件的model对象需要挂载到全局store里面去，那么通过发送一个type为@@redux/register的action，在reducer里面手动挂载model对应的state对象，同时要将effects里面的方法都缓存起来，便于后续执行，我们代码里是保存在effectsMap中。
const effectsMap = {};
const store = createStore((state, action) =>; {
const { type, payload = {} } = action;
const { namespace, effects, initalState, updateState } = payload;
if (type === '@@redux/register') { // 注册
effectsMap[namespace] = effects;
return Object.assign({}, state, { [namespace]: initalState });
}
if (type === '@@redux/update') { // 副作用执行完毕，需要更新namespace对应的状态值
return Object.assign({}, state, { [namespace]: Object.assign({}, state[namespace], updateState) });
}
if (type.includes('/') && !type.includes('@@redux/INIT')) { // 视图层发起的dispatch方法进入到这里，需要分离出namespace和具体的effect方法名
const [ sliceNameSpace, effect ] = type.split('/');
if (effectsMap[sliceNameSpace] && effectsMap[sliceNameSpace][effect]) {
executeAsyncTask(state, sliceNameSpace, effectsMap[sliceNameSpace][effect], payload); // 执行异步任务
}
}
return state;
}, {});
结合注释应该不难理解，接下来就看一下executeAsyncTask的实现吧，其实很简单：
function updateStore(namespace) {
return function(state) {
Promise.resolve().then(() => {
store.dispatch({
type: '@@redux/update',
payload: {
namespace,
updateState: state,
}
});
});
}
}
async function executeAsyncTask(state, namespace, fn, payload) {
const response = await fn.call(state[namespace], payload, updateStore(namespace));
store.dispatch({
type: '@@redux/update', // 发起更新state的意图
payload: {
namespace,
updateState: response,
}
});
}
至此store就完成了动态注册和状态更新的基本需求，下面要实现组件的异步加载了。
2.异步加载
在mini-async-dva中，视图是异步加载的，这里的异步主要是控制视图依赖的models实现异步加载和注册，视图需要等到models完成注册后才能渲染，保证组件内部逻辑与store的状态保持同步。
import { useStore } from 'react-redux';
function AsyncComponent({ deps, children, ...rest }) {
const store = useStore();
const [modelLoaded, setModelLoaded] = useState(!Array.isArray(deps) && deps.length === 0);
useEffect(() => {
if(!modelLoaded) {
Promise.all(deps.map((dep) => runImportTask(dep))).then(() => {
setModelLoaded(true);
});
}
}, []);
function runImportTask(dep) {
if (!store.getState().hasOwnProperty(dep)) { // model没有注册过
return new Promise((resolve, reject) => {
import(`models/${dep}.js`).then((module) => {
const { namespace, state: initalState = {}, effects } = module.default;
store.dispatch({
type: '@@redux/register',
payload: {
effects,
initalState,
namespace: namespace || dep,
}
});
resolve();
}).catch(reject);
});
}
}
if (modelLoaded) {
return (
<>
{React.createElement(children, rest)}
</>
);
}
return null;
}
AsyncComponent组件主要的功能包含两点，其一是异步加载所有依赖的models，然后发起一个动态注册model对象的意图，其二是当models都加载完毕，渲染我们的视图。
3.状态绑定
function model(...deps) {
return function wrapComponent(target) {
const cacheRender = connect(function mapStateToProps(state) {
return deps.reduce((mapState, dep) => {
mapState[dep] = state[dep];
return mapState;
}, {});
}, null)(target);
return (props) => {
return (
<AsyncComponent deps={deps} {...props}>
{cacheRender}
</AsyncComponent>
)
};
}
}
model函数搜集我们的视图组件依赖的model名称，然后将视图组件包裹在AsyncComponent内，从而实现动态控制和connect的绑定，至此就基本完成了mini-async-dva的核心功能了。
最后
到这里本文也就结尾了，mini-async-dva的项目代码已经放到github上了，具体地址可查看附录【3】,如果看官觉得可以，顺手点个小星星呗。
附录：
【1】https://github.com/dvajs/dva/issues/1919 （async支持讨论）
【2】https://mp.weixin.qq.com/s/frSXO79aq_BHg09rS-xHXA （一文彻底搞懂 DvaJS 原理）
【3】https://github.com/lanpangzi-zkg/mini-async-dva （mini-async-dva）
福禄·研发中心
福袋
