dva和UmiJs结合使用教程：effects，reducer，dispatch

dva使用

dva和UmiJs结合的官方文档：dva | UmiJS

准备工作

1.预先定义好model数据仓库信息，namespace表示model仓库名，state表示model仓库中需要用到的数据。

 const Model = {
     namespace: 'coursewareName',
     state: {
         coursewareList: [],
         total: 0,
     },

2.绑定组件(CoursewareManage)与数据仓库(coursewareName)

 const mapStatetoProps = ({ coursewareName }) => {
   return { coursewareName }
 }
 export default connect(mapStatetoProps)(CoursewareManage)

数据更新过程：

1.首先通过调用函数等操作发送dispatch请求

 const getCoursewareList = (pageSize, current, order) => {
     setIsLoading(true)
     dispatch({
         type: 'coursewareName/getCoursewareList',
         payload: {
             pageSize,
             current,
             order,
         },
         callback: () => {
             setIsLoading(false)
         },
     })
 }

2.由dispatch执行model中的effects对应的函数，在effects函数中调用service函数，通过异步方式从后端中获取到所需数据

 effects: {
     *getCoursewareList({ payload, callback }, { call, put }) {
         const res = yield call(getRemoteCoursewareList, payload)
         yield put({
             type: 'saveCoursewareList',
             payload: res,
         })
         if (callback) callback()
     },
 },

3.获取到的数据传递给reducers中的函数，通过同步方式更新model中的state数据信息

 reducers: {
     saveCoursewareList(state, { payload }) {
         //console.log('reducers:', payload)
         return {
             ...state,
             coursewareList: payload.data,
             total: payload.total,
         }
     },
 },

5.state数据更新后，由于数据已绑定组件，react会重新渲染组件ui