Как разделить компоненты и контейнеры?

Question

У меня есть требование, когда я создаю слайдер карт (карусель карт).Я разделил компоненты на слайдер и карту.Тогда у меня есть один контейнер "приложение".Данные для карт поступают из редукса.Существует возможность обновить каждую карту также.На данный момент у меня есть выборка данных, обновить действия данных в контейнере «App».В контейнере приложения я выполняю следующие действия:

1. Действие вызова извлечения данных.
2. Получение данных в качестве проп.
3. Отображение через них и передача необходимой информации в карты.
4. Передайте эти карты как дочерние для.
5. Когда карта обновляется, я вызываю действие обновления данных.

Так есть ли необходимость отделятьэти?Или текущая структура в порядке?

import React, { Component } from "react";
import { connect } from "react-redux";

import Slider from "../../Components/Slider";
import Card from "../../Components/Card";
import * as actions from "../../Store/Actions/app";


class App extends Component {
  componentDidMount() {
    this.props.onInitApp(data);
  }


  cardRefreshHandler = (e, countryName, countryId) => {
    this.props.onLoading();
    this.props.onCardRefresh(country, countryId);
  };

  render() {
    let cards = "";
    if (this.props.data && this.props.data.length > 0) {
      cards = this.props.data.map((item, index) => {
        return (
          <Card
            key={index}
            id={index}
            data={item}
            onRefresh={this.cardRefreshHandler}
          />
        );
      });
    }

    return (
      <div class="app-container">
        <Slider>
          {cards}
        </Slider>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    data: state.data,
    loading: state.loading
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onInitApp: country => dispatch(actions.fetchData(country)),
    onLoading: () => dispatch(actions.loadRefreshScreen()),
    onCardRefresh: (country, countryId) => dispatch(actions.refreshData(country, countryId))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

Эта статья может быть полезна для лучшего понимания структурных различий между контейнерами и компонентами: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Вы обнаружите, что ваши компоненты намного проще использовать повторно и рассуждать, если вы разделите их на две категории. Я называю их «Контейнерные и презентационные компоненты» *, но я также слышал «Толстый и тощий», «Умный и тупой», «Состояние и чистота», «Экраны и компоненты» и т. Д. Они не совсем одинаковы, но основная идея схожа.