容器中的 React 组件和 redux 的表示组件的正确分离答案

【问题标题】：Proper seperation of React component in container and presentational components for redux容器中的 React 组件和 redux 的表示组件的正确分离
【发布时间】：2018-11-30 18:24:29
【问题描述】：

我正在尝试分离标题中提到的组件。

根据 redux 的 react 教程，最好的做法是拆分组件。

到目前为止，我有以下组件：

ReduxTestNetwork

import React, {Component} from 'react';
import {Edge, Network, Node} from '@lifeomic/react-vis-network';
import { connect } from "react-redux";
import MyNetwork from "./MyNetwork";

...

const mapStateToProps = state => {
    return { nodes: state.nodes,edges: state.edges };
};
const VisNetwork = ({nodes,edges}) => (
    <MyNetwork nodes={nodes} edges={edges} options={options}/>
);
const ReduxTestNetwork = connect(mapStateToProps)(VisNetwork);
export default ReduxTestNetwork;

我的网络

import React, {Component} from 'react';
import {Edge, Network, Node} from '@lifeomic/react-vis-network';
import connect from "react-redux/es/connect/connect";
import {addNode} from "../actions";

const mapDispatchToProps = dispatch => {
    return {
        addNode: node => dispatch(addNode(node))
    };
};

class MyNetwork extends Component {
    constructor(props) {
        super(props);
        this.state = {nodes: props.nodes, edges: props.edges, options:props.options};
    }
    componentDidMount() {
        console.log('I just mounted')
        //this.onClick();
    }

    onClick(e){
        console.log(e)
        console.log(this)
       /* this.props.addNode({id:5,label:'Node 5'});

        this.setState(prevState => ({
            nodes: [...prevState.nodes, {id:5,label:'Node 5'}]
        }));*/
    }
    render() {
        const nodes = this.state.nodes.map(node => (
            <Node key={node.id} {...node}/>
        ));
        const edges = this.state.edges.map(edge => (
            <Edge key={edge.id} {...edge}/>
        ));
        return (
            <div id='network'>
                <Network options={this.state.options}   ref={(reduxTestNetwork) => {
                    window.reduxTestNetwork = reduxTestNetwork
                }} onSelectNode={this.onClick.bind(this)}>
                    {nodes}
                    {edges}
                </Network>
            </div>);
    }
}
const SVNetwork = connect(null, mapDispatchToProps)(MyNetwork);
export default SVNetwork;

我将 ReduxTestNetwork 连接到 store 以获取 state 作为 props 和 MyNetwork 以便能够调度。

我读到展示组件应该只用于显示元素，而容器组件应该包含逻辑如何显示以及显示什么。但是我在 MyNetwork 中还需要一些逻辑来与使用 3rd 方库的 Network 组件进行交互。

所以我的问题是：

我的分离是否正确？
我应该将逻辑放在哪里（例如）计算显示节点的大小或颜色？

提前致谢

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

几件事：

您不需要使用两次连接。在容器上同时传递 mapStateToProps 和 mapDispatchToProps。
如果您想遵循纯展示组件的路径，请考虑使用副作用库：refract、sagas、thunk...它们具有处理组件外部逻辑的模式。
如果您更喜欢手工制作的方法，您可以将所需的每个方法移动到容器中，并通过 props 仅将数据和函数引用传递给组件以对其进行修改。

【讨论】：