umi 整合dva

亦凉 2021-07-24 16:00 522阅读 0赞

1、安装
    	cnpm install dva --save
    
    2、创建model文件
    	其中这些文件会识别为model文件
    		src/models下的文件
    		src/pages/models下的文件
    		src/pages下所有model.ts文件
    	
    	如在src/models/创建的文件
    	import {list} from '../service/dav'
    		
    	export default{
    	    namespace:'xx',
    	    state:'x',
    	    reducers:{},
    	    effects:{}
    	}
    3、与models同级创建service文件夹,用于创建api接口
    
    4、组件连接model
    	import React,{Component} from 'react'
    	import {connect} from 'dva'
    	
    	class App extends Component{
    	
    	    get=()=>{
    	        const {dispatch}=this.props;
    	        dispatch({
    	            type:'davDemo/list',
    	            payload:{
    	                id:1
    	            },
    	            callback:res=>{
    	                console.log('callback:'+res);
    	            }
    	        })
    	    }
    	
    	    render()
    	    {
    	        const {davDemo}=this.props;
    	
    	        return(
    	
    	            <div>
    	                dva
    	                <Button onClick={this.get}>加载</Button>
    	            </div>
    	        )
    	    }
    	}
    	
    	const mapStateToProps=(state)=>{
    	    return{
    	        davDemo:state.davDemo
    	    }
    	}
    	
    	
    	export default connect( mapStateToProps)(App)
    
    5、使用Mock模拟数据
    	export default{
    	    'GET /xx':x
    	}
    	网络请求去请求该路径即可

代码示例:  
层级关系  
![在这里插入图片描述][20200719095802222.png]  
model/dev.js:

import { list} from '../service/dav'
    
    export default{ 
        namespace:'davDemo',
        state:{ 
            list:[]
        },
        reducers:{ 
            listInfo(state,action){ 
                return { 
                    ...state,
                    list:action.payload
                }
            }
        },
        effects:{ 
            *list({ payload,callback},{ put,call})
            { 
                const res=yield call(list,payload);
                yield put({ 
                    type:'listInfo',
                    payload:res
                })
                callback(res);
            }
    
        }
    }

service/dav.js:

import axios from 'axios'
    
    export async function list(params){ 
        console.log('params:'+params);
        const res=await axios.get('/api/index');
        console.log(res.data);
    
        return res;
    }

组件:

import React,{ Component} from 'react'
    import { connect} from 'dva'
    import { Button} from 'antd'
    
    class App extends Component{ 
    
        get=()=>{ 
            const { dispatch}=this.props;
            dispatch({ 
                type:'davDemo/list',
                payload:{ 
                    id:1
                },
                callback:res=>{ 
                    console.log('callback:'+res);
                }
            })
        }
    
        render()
        { 
            const { davDemo}=this.props;
    
            return(
    
                <div>
                    dva
                    <Button onClick={ this.get}>加载</Button>
                </div>
            )
        }
    }
    
    const mapStateToProps=(state)=>{ 
        return{ 
            davDemo:state.davDemo
        }
    }
    
    
    export default connect( mapStateToProps)(App)

mock/index.js:

export default{ 
        'GET /api/index':[1,2,3,4]
    }

.umirc.ts:

import {  defineConfig } from 'umi';
    
    export default defineConfig({ 
      nodeModulesTransform: { 
        type: 'none',
      },
      routes: [
        {  path: '/', component: '@/pages/index', },
        {  path: '/user', component: '@/pages/user/index',
            routes:[{ 
              path: '/user/child', component: '@/pages/user/child/index'
            }]
        },
        {  path: '/dva', component: '@/pages/dva/index', },
      ],
    });

[20200719095802222.png]: /images/20210724/a688b2746f3a4375a8d682c39b8251b5.png