我们需要什么
我们在使用redux时,由于前端应用一般模块较多,数据状态复杂,不可能只使用一个reducer,一般情况下都会对reducer 函数 进行拆分,然后使用redux内置的API combineReducers合并成一个对象,即state.
所以在创建store的主入口会存在大量 类似这种 先手动import 然后再combineReducers的写法。
// 使用 ES6 的对象字面量简写方式定义对象结构
const rootReducer = combineReducers({
theDefaultReducer,
firstNamedReducer,
secondNamedReducer
});复制代码
有没有一种方式能做到:
- 自动引入reducer
- state的结构按照我们设想的模块化嵌套
那么就让我们来了解一个webpack提供的一个API
require.context
通行执行require.context()
方法用以创建自己的(模块)上下文,使用这个上下文实现自动导入模块。
方法可以传入3个参数
- 要搜索的文件夹目录
- 是否还应该搜索它的子目录
- 以及一个匹配文件的正则表达式。
require.context(directory, useSubdirectories = false, regExp = /^\.\//);require.context("./test", false, /\.test\.js$/);// (创建了)一个包含了 test 文件夹(不包含子目录)下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。require.context("../", true, /\.stories\.js$/);// (创建了)一个包含了父级文件夹(包含子目录)下面,所有文件名以 `.stories.js` 结尾的文件的上下文。复制代码
上下文模块导出一个(require)函数,这个函数可以接收一个参数:request。(我理解的这个参数就相当于一个路径)
导出的方法有 3 个属性: resolve
, keys
, id
。
resolve
是一个函数,它返回请求被解析后得到的模块 id。keys
也是一个函数,它返回一个数组,由所有可能被上下文模块处理的请求(译者注:参考下面第二段代码中的 key)组成。
OK 概念了解完了 那就开始实操一下
创建目录
这里假定我们的应用分为根横块 以及若干子模块 子模块中又有即嵌套的子模块(这个根据自已实际应用去构建,这里只是讲解思路)
我们约定名称 XX.redux.js xx即为我们划分的模块名
建立redux目录 一个根模块app 两个子模块 user nav user里又有两个子模块
编写reducer
代码没有写全 只是给出示例
创建根径的reducer.js 在这个文件编写自动引入代码
创建store
OK 启动测试
这样基础结构就搭好了 按照这个思路 组里其它小伙伴按照模块划分好 建立文件编辑代码即可。