昨天在浏览几个react项目的源码,发现当项目较大时,会有个很蛋疼的地方:
大型项目会根据模块来分拆reducer,因此会有大量的 <业务包名>/reducer/reducer.js 这样的结构,然后在createStore时又得合并起来。
因此需要写一个类似这样的代码来进行合并:
将我路径下的所有redux目录下的reducer.js的default export全部都变成export导出,然后:
好了,大功告成,再也不用维护rootReducer.js了。
这里只是抛砖引玉,同样的原理,使用webpack动态导出的特性,你还可以对其它的文件进行合并导出,例如actionType,等等,不限于redux。
大型项目会根据模块来分拆reducer,因此会有大量的 <业务包名>/reducer/reducer.js 这样的结构,然后在createStore时又得合并起来。
因此需要写一个类似这样的代码来进行合并:
rootReducer.js
import aTodos from '../../xxxxx/reducers/xxxxxTodos'
import bTodos from '../../yyyyy/reducers/yyyyyTodos'
import cTodos from '../../zzzzz/reducers/zzzzzTodos'
const rootReducer = combineReducers({
aTodos : aTodos ,
bTodos : bTodos ,
cTodos : cTodos
})
随着模块的增加,该文件需要不断修改和调整。即使简化写成
export aTodos from '../../xxxxx/reducers/xxxxxTodos'
export bTodos from '../../yyyyy/reducers/yyyyyTodos'
export cTodos from '../../zzzzz/reducers/zzzzzTodos'
然后sotre文件去import * as ABC这样引入,也免不了写一些繁琐的格式化代码。
当时先想是不是可以做一些预处理根据格式来生成文件,但是觉得还是比较麻烦,版本管理器里还得保存这些版本。在翻阅webpack资料时,看到动态模块这块突然灵光乍现:是否可以实现自动扫描我的源码结构来动态生成呢?
于是翻阅了一些资料,发现我的想法是可以的,因为:
1)require.context 能够使用正则遍历你的文件结构,这个正是包扫描需要的
2)exports是一个对象结构,也就意味着你可以通过exports[key]=value的形式动态来导出你的export
3)combineReducers需要的是一个对象结构,我只需要通过 import * 导入我的文件,就能够作为一个对象导入
说干就干,于是有了这样的一个文件:
autoRecucers.js
/**
* 基于路径扫描的配置模式.
* @Author JIM on 2017/2/21.
*
* 等效语句:
* export aaa from './../module/aaa/reducer/reducer'
* export bbb from './../module/bbb/reducer/reducer'
* export ccc from './../module/ccc/reducer/reducer'
* ....
*/
let contexts = require.context("../module", true, /^\.\/.*\/redux\/reducer\.js$/);
contexts.keys().forEach((key) => {
let name = /\.\/([^/]+)\//g.exec(key); //把包路径名变成导出名
let func = contexts(key).default;
if(typeof(func)!="undefined"){
exports[name[1]] = func;
}
});
将我路径下的所有redux目录下的reducer.js的default export全部都变成export导出,然后:
import * as reducers from './auto/autoReducers';
store = createStore(
combineReducers(reducers),
applyMiddleware(thunk)
);
好了,大功告成,再也不用维护rootReducer.js了。
这里只是抛砖引玉,同样的原理,使用webpack动态导出的特性,你还可以对其它的文件进行合并导出,例如actionType,等等,不限于redux。