Dva学习笔记

悠悠 2021-09-21 02:54 495阅读 0赞

# Dva学习笔记 #

本文是基于Windows 10系统环境，学习和使用Dva：

*  **Windows 10**

--------------------

## 一、dva状态管理state ##

### (1) 定义一个model文件 ###

*  **zufang.js**

// zufang.js
    
    export default { 
    
        // 命名空间，全局唯一
        namespace: 'zufang',
    
        // 状态管理，存储数据
        state: { 
            visible:true,
            pagination:{ 
                page:1,
                pageSize:10,
            }
        },
    
        // 定义同步请求函数，用于处理state的数据
        reducers: { 
    
        },
    
        // 定义异步请求函数，用于发起异步请求
        effects: { 
    
        },
    
    }

## 二、获取dva状态管理state ##

### (1) 第一种获取dva管理的state数据方法 ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    // 获取zufang.js文件中的state管理的数据，并赋值给data
    // 小括号中的state为dva管理的全局state，通过state['zufang']定位到zufang.js文件管理的state
    const MapZuFangToProps = (state) => { 
        return {  data: state['zufang'] };
    }
    
    @connect(MapZuFangToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            const {  data } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ data.visible}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

### (2) 第二种获取dva管理的state数据方法 ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    // 通过解构的方式获取
    const MapZuFangToProps = (state) => { 
        return { 
            data: { 
                ...state['zufang']
            }
        };
    }
    
    @connect(MapZuFangToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            const {  data } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ data.visible}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

### (3) 第三种获取dva管理的state数据方法 ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    // 按需加载
    const MapZuFangToProps = (state) => { 
    
        return { 
            visible: state['zufang'].visible,
        };
    }
    
    @connect(MapZuFangToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            const {  visible } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ visible}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

### (4) 第四种获取dva管理的state数据方法 ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    // {zufang} 等价于 state['zufang']，将zufang从全局state中解构出来
    const MapZuFangToProps = ({  zufang }) => { 
        return { 
            data: zufang,
        }
    }
    
    @connect(MapZuFangToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            const {  data: {  visible } } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ visible}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

### (5) 第五种获取dva管理的state数据方法 ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    // 通过解构的方式获取
    const MapZuFangToProps = ({  zufang }) => { 
        return { 
            data: {  ...zufang }
        }
    }
    
    @connect(MapZuFangToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            const {  data: {  visible } } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ visible}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

### (6) 第六种获取dva管理的state数据方法 ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    // 添加loading，获取zufang.js文件中的state管理的数据，并赋值给data
    const MapZuFangToProps = ({  zufang, loading }) => { 
        return { 
            data: zufang,
            loading
        }
    }
    
    @connect(MapZuFangToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            const {  data: {  visible } } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ visible}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

### (7) 第七种获取dva管理的state数据方法 ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    // 解构方式
    const MapZuFangToProps = ({  zufang, loading }) => { 
        return { 
            ...zufang,
            loading
        }
    }
    
    @connect(MapZuFangToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            const {  data: {  visible } } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ visible}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

### (8) 第八种获取dva管理的state数据方法 ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    const MapZuFangToProps = (state) => { 
        const {  loading } = state;
        return { 
            data: state['zufang'],
            loading,
        }
    }
    
    @connect(MapZuFangToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            const {  data } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ data.visible}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

### (9) 第九种获取dva管理的state数据方法（推荐使用） ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    const MapZuFangToProps = ({ zufang, loading}) => { 
        return { 
            zufang,
            loading,
        }
    }
    
    @connect(MapZuFangToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            const {  visible} = this.props.zufang;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ visible}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

## 三、一个react组件关联多个dva对象 ##

### (1) 第一种关联方法 ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    const MapZuFangToProps = ({  zufang, loading }) => { 
        return { 
            ...zufang,
            loading,
        }
    }
    
    const MapUsersToProps = ({  users }) => { 
        return { 
            ...users,
        }
    }
    
    @connect(MapZuFangToProps)
    @connect(MapUsersToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            // const { data } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ true}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

### (2) 第二种关联方法 ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    // 不采用解构方式，不同dva对象中的数据可以存在名字相同的变量，避免重复
    const MapZuFangToProps = ({  zufang, loading }) => { 
        return { 
            zufang,
            loading,
        }
    }
    
    // loading为全局变量，只需加载一次
    const MapUsersToProps = ({  users }) => { 
        return { 
            users,
        }
    }
    
    @connect(MapZuFangToProps)
    @connect(MapUsersToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            // const { data } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ true}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

### (2) 第三种关联方法（推荐使用） ###

*  **ZuFang.js**

import React, {  Component } from 'react'
    import {  Modal } from 'antd'
    import {  connect } from 'dva';
    
    // 不采用解构方式，不同dva对象中的数据可以存在名字相同的变量，避免重复
    const MapModelsToProps = ({  zufang, users, loading }) => { 
        return { 
            zufang,
            users,
            loading,
        }
    }
    
    @connect(MapModelsToProps)
    class ZuFang extends Component { 
    
        render() { 
            console.log(this.props);
            // const { data } = this.props;
            return (
                <div>
                    <Modal
                        title='Basic Modal'
                        visible={ true}
                    >
                        <p>Some contents...</p>
                    </Modal>
                </div>
            )
        }
    }
    
    export default ZuFang;

--------------------