Dva學習筆記

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;

---