react中处理多组件通信，redux是不是真香呢？(2021-5-13)

[yaogengzhu]

redux 数据模型

export default {
    state: {
        count: 1,
        flag: false,
        data: {
            count: 1,
            name: 'zs',
        },
    },
    reducers: {
        addCount: (state, number) => {
            return {
                ...state,
                count: state.count + number,
            };
        },
        updataData: (state, obj) => {
            return {
                ...state,
                data: {
                    ...state.data,
                    ...obj,
                },
            };
        },

        toggle: (state) => {
            return {
                ...state,
                flag: !state.flag,
            };
        },
    },
    effects: {
        change: () => {
            //
        },
    },
};

[yaogengzhu]

React Demo

import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'antd/lib/radio';
import { connect } from 'react-redux';
import Count from './Count';

const Demo = (props) => {
    const { addCount, count, flag, toggle, data } = props;

    const onChange = () => {
        addCount(1);
    };

    return (
        <div>
            <div>数据{count}</div>
            <div> count: { data.count }</div>
            <div> age: { data.name }</div>
            {flag && <div>这个模块用来隐藏的</div>}
            <Button
                onClick={() => {
                    onChange();
                }}
            >
                按钮测试数据改变
            </Button>
            <Button
                onClick={() => {
                    toggle();
                }}
            >
                显示数据
            </Button>

            <Count />
        </div>
    );
};

Demo.propTypes = {
    flag: PropTypes.bool.isRequired,
    count: PropTypes.number.isRequired,
    addCount: PropTypes.func.isRequired,
    toggle: PropTypes.func.isRequired,
    data: PropTypes.object.isRequired,
};

const mapDispatch = (dispatch) => {
    return {
        addCount: dispatch.Demo.addCount,
        toggle: dispatch.Demo.toggle,
    };
};

const mapState = (state) => {
    return {
        count: state.Demo.count,
        flag: state.Demo.flag,
        data: state.Demo.data,
    };
};

export default connect(mapState, mapDispatch)(Demo);

[yaogengzhu]

子组件

import React from 'react';
import PropTypes from 'prop-types';
import connect from 'react-redux/lib/connect/connect';
import { Button } from 'antd/lib/radio';

const Count = (props) => {
    const { addCount, updataData } = props;

    return (
        <div>
            <div>???</div>
            <div
                onClick={() => {
                    addCount(1);
                }}
            >
                change
            </div>
            <Button
                onClick={() => {
                    updataData({
                        count: 2,
                    });
                }}
            >
                update count
            </Button>
            <Button
                onClick={() => {
                    updataData({
                        name: 'ls',
                    });
                }}
            >
                update name
            </Button>
        </div>
    );
};

Count.propTypes = {
    addCount: PropTypes.func.isRequired,
    updataData: PropTypes.func.isRequired,
};

const mapDispatch = (dispatch) => {
    return {
        addCount: dispatch.Demo.addCount,
        updataData: dispatch.Demo.updataData,
    };
};

export default connect(null, mapDispatch)(Count);