dva实践应用

　　最近项目运用到了dva，总结一下，以防忘记。

       dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，把 reducer, initialState, action, saga 封装到一起。

　　在dva中主要分3层，models,services,components,其中models里放的是各种数据，进行数据的交互。services是请求后台接口的方法。components是渲染组件了。

services层：

这里是ajax的一些请求方式，params是向后端传递的参数，type、_method是请求类型
//get
export async function getApplications(params) {
    return ajax(`/dpi/whitelist/applications`);
}
//delete
export async function deleteField(params) {
    return ajax(`/dpi/whitelist/${params.id}`, {
        type: 'POST',
        data: {
            _method: 'DELETE'
        }
    });
}
//post
export async function addWhitelist(params) {
    return ajax('/dpi/whitelist', {
        type: 'POST',
        data: {
            ...params
        }
    });
}
//put
export async function enable(params) {
    return ajax(`/dpi/whitelist/enable/${params.id}`, {
        type: 'POST',
        data: {
            _method: 'PUT'
        }
    });
}

models层：

export default {
    namespace: 'whiteListModel', //命名空间名字，必填，页面需要以他为目标找到需要的数据
    state: {
      list: []    //state就是用来放初始值的
    },
    subscriptions: {
    // 订阅监听，比如我们监听路由，进入页面就执行，可以在这写
        setupHistory({ dispatch, history }) {
            history.listen((location) => {
                dispatch({
                    type:'initState__',
                    payload:{}
                })
            })
        },
    },
    reducers: {
        initState__(state,{payload}){
            state.list = payload;
        },
        // changeList__可以为一个方法名 
    　  // 这里state就是上面初始的state，这里理解是旧state
       // payload 是传过来的参数，名字随便起，这接收一个action 
        changeList__(state, { payload }) {
            state.list = payload//执行后更新state中list值
        }
    },
    effects: {
        *getList({ payload }, { call, put, select }) {
        //getList方法名，payload是页面传来的参数，是个对象，如果没参数可以写成{_,{call,put,select}}
            const state = yield select(state => state);
            //select就是用来选择上面state里的，这里没用上
            const response = yield call(getList, params);
            // getList是引入service层那个js的接口名称，params是后台要求传的参数，response 就是后台返回来的数据
            if (response && response.content) {
                yield put({ type: 'changeList__', payload: response.content });
                // changeList__就是reducers中方法, put就是用来触发上面reducers的方法，payload里就是传过去的参数。 同时它也能触发同等级effects中其他方法。  
            }
        }
    }
};
                                    

components层：

handleClick = (value) => {
        this.props.dispatch({
              type: "whiteListModel/getList",
               // 这里就会触发models层里面effects中getList方法（也可以直接触发reducer中方法，看具体情况） ,whiteListModel就是models里的命名空间名字
                    payload: {
                           list: value,//给接口传递的数据
                    },
              })
}                                    

　　以上为dva的基本运用流程：components调用dispatch触发models中定义的方法，并把参数传递过去；models来处理传过来的数据，并存储起来，并调用services里面后端的接口，把参数传递给后端；services接收参数完成前后端交互。

　　页面中的render会在props、state改变后进行刷新执行，往往页面render会执行多次，如果直接在页面使用赋值会拿不到最终正确的正确数据，只会拿到第一次，所以这些逻辑、赋值一般会在models中完成，页面只进行渲染。