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;