Dva学习笔记

千纸鹤 5月前   阅读数 35 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;

发布了74 篇原创文章 · 获赞 111 · 访问量 123万+

注意:本文归作者所有,未经作者允许,不得转载

全部评论: 0

    我有话说: