Правильное разделение компонента React в контейнерах и презентационных компонентах для приставок

Question

Я пытаюсь отделить компонент, как упомянуто в названии.

В соответствии с уроком о сокращении для ответа лучше всего разделять компоненты.

До сих пор у меня естьследующие компоненты:

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;

MyNetwork

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 к хранилищу, чтобы получить состояние в качестве реквизита, и MyNetwork для возможности отправки.

Я читал, что презентационные компоненты должны использоваться только для отображения элементов, а контейнерные компоненты должны включать логику, как и что отображать.Но в MyNetwork мне нужна некоторая логика для взаимодействия с компонентом Network, который использует стороннюю библиотеку.

Итак, мои вопросы:

1. Правильно ли разделение?
2. Где я должен разместить логику для (например) расчета размера или цвета отображаемых узлов?

Заранее спасибо

Answer 1

Несколько вещей:

1. Вам не нужно использовать подключение дважды.Передайте mapStateToProps и mapDispatchToProps одновременно в контейнере.
2. Если вы хотите следовать по пути чисто презентационных компонентов, рассмотрите возможность использования библиотеки побочных эффектов: refract, sagas, thunk ... у них есть шаблоныработать с вашей логикой за пределами компонента.
3. Если вы предпочитаете более ручной подход, вы можете переместить каждый необходимый вам метод в контейнер и передать компоненту через реквизиты только данные и ссылки на функцииизменить его.