美文网首页
React dva脚手架Model

React dva脚手架Model

作者: AcessCors | 来源:发表于2019-05-14 11:20 被阅读0次

    Model是dva脚手架中很重要的部分,

    代码如下:

    namespace:'MyInf',
    
    初始值,优先级低于传给 dva() 的 opts.initialState。//state
    
    state: {
    
        user:{
    
            data:{
    
                code:null,
    
                data:[],
    
            }
    
        },
    
    },
    
    //以 key/value 格式定义 reducer。用于处理同步操作,唯一可以修改 state 的地方。由 action 触发,下面是由save触发。
    
    reducers: {
    
        save(state, { payload }) {
    
            //保存数据到state
    
            return{
    
                state,
    
               //将payload数据放入user数组中
    
                user: payload,
    
            };
    
        },
    
    },
    
    //以 key/value 格式定义 effect。用于处理异步操作和业务逻辑,不直接修改 state。由 action 触发,可以触发 action,可以和服务器交互,可以获取全局 state 的数据等等。
    
    effects: {
    
        *fetch({ payload }, { call, put }) {// eslint-disable-line
    
            //通过call执行initUserInf方法
    
            const response=yield call(initUserInf);
    
            //put触发reducers中的save方法,传入参数payload
    
            yield put({type:'save',payload:response});
    
        },
    
    },
    
    //以 key/value 格式定义 subscription。subscription 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。
    
    subscriptions: {
    
        setup({ dispatch, history }){ // eslint-disable-line
    
        // 监听 history 变化,当路由为`/xx/xx` 时触发 `fetch` action
    
            returnhistory.listen(({ pathname, search }) => {
    
                if(pathname ==='/xx/xx) {
    
                    //当条件满足的时候触发,路由==/my/myInf 执行fetch action,申明payload空数组
    
                    dispatch({type:'fetch',payload: {} });
    
                }
    
            });
    
        },
    
    },
    

    相关文章

      网友评论

          本文标题:React dva脚手架Model

          本文链接:https://www.haomeiwen.com/subject/ghzjaqtx.html