初始化
此处记录，我自己对dva所有的，不能理解的知识点（之前从来没接触过react，更别说redux，看了寥寥几个教程，就上手做项目了，嘿嘿。）
对于dva的基础，可以访问官网了解
这里可能会比较突然，因为我的项目已经快要一期结束了，这里大家一定会对有些地方，会感觉到跳的很快，这里说声对不住了，这一阶段的项目结束之后，后边会整体梳理，从头再写一版。
我项目的部分目录截图
项目部分目录截图
这里我对react组件的数据如何获取的细节有很多不理解的地方，这里一一进行学习和记录
关于models
model各个模块的作用理解，先上一个模板代码
export default {
//这个参数来定义命名空间的名称，作用是用来保护该命名空间下的数据，不会和别的models冲突。在同个项目下，所有的namespace不能重复。
namespace: 'example',
//其中包含该models的初始值，在这里是空数组
//state: {age:20}表示初始值中的age值为20
state: {},
//这里我的理解是订阅路由，对于列表显示页，如果有增删改查等功能，这里一般都会订阅分页查询。
//即默认进入和此model关联的页面，会显示查询到的数据。
//嘿嘿，不会刚进页面就删除某条数据吧。
//至于其他用法，朋友们自行扩展了。
subscriptions: {
setup({ dispatch, history }) {
},
},
//这里的功能是异步处理，意思是想ajax一样不刷新页面，获取数据。
//但是yield表示同步调用，即上边的代码处理完后，才会运行下边的代码。这里的同步和上边的异步不是一个含义。
effects: {
//此处的fetch可以自行定义，比如查询可以用query，添加可以add等
//此处的payload参数是形参，当别的地方调用的时候，传入的值用payload来接收
/*这是从项目中组件中拷贝出来的一个方法，即上边项目部分截图中components中的Checklist.js文件
这个方法中的dispatch中type指定了调用了models命名空间为checklist中effects下的*patch(){}
其中dispatch的第二个参数payload，就是传入effects某个功能的参数。
function editHandler(id, values) {
dispatch({
type: 'checklist/patch',
payload: { id, values },
});
}
*/
//对于call，put，select，可以在使用时填入fetch的第二个参数内
/*这里依然是从我项目中拿出的一段代码，来说明这三个参数的使用
这个方法是移除指定ID的数据
*remove({ payload: id }, { call, put, select }) {
yield call(checklistService.remove, id); //移除了要移除的数据，checklistService.remove可以看出这里是调用了service中的remove方法，传递了id作为参数。
const page = yield select(state => state.checklist.page); //这里获取state中的page，但是我查看了自己的项目，state中没有state.checklist.page，倒是有state.page。这个回头要查看一下。
对于select还有另外两种写法，
方式二： const page= yield select(({page}) =>page)
方式三： const page= yield select(_ =>_.page)
这里可以对page进行处理，比如let pageNew = page + 1；
下边可以使用pageNew作为payload的参数
yield put({ type: 'fetch', payload: { page } }); //调用effects中的fetch查询，这个fetch不是未注释的*fetch，下边注释中贴上我自己项目中的代码。
},
*/
/*上边的put调用的fetch查询是这里的被注释的内容
*fetch({ payload: { page = 1 } }, { call, put }) {
在put前处理数据
const data1 = yield call(checklistService.fetch, { page });
let data = []
let pageTotal = 0;
if(data1.code === 200){
data = data1.data.list;
if (data1.data.total) {
pageTotal = data1.data.total;
}
}
yield put({//这里type的save指的是reducers中的save
type: 'save',
payload: {
data,
total: parseInt(pageTotal, 10),
page: parseInt(page, 10),
},
});
},
*/
*fetch({ payload }, { call, put, select }) {
yield put({ type: 'save' });
},
},
//用来保存更新state值 上面的put方法调用这里的方法
//这里的state是当前总的state，这里的action包含了上面传递的参数和type
//这里用ES6语法来更新当前state中payload的值
reducers: {
save(state, action) {
return { ...state, ...action.payload };
},
},
};
网友评论