dva实践应用

这里是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‘
        }
    });
}

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中其他方法。  
            }
        }
    }
};
                                    

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