Как контейнерный подход действительно работает на React

Question

Я занимаюсь разработкой приложения, и сначала я хотел убедиться, что правильно понимаю парадигму контейнера в React, прежде чем приступать к дальнейшей разработке.

Я понимаю, что контейнерный или умный компонент больше похож на обработчик данных, здесь нет представления. Компонент дампа - это просто компонент без сохранения состояния, который в основном представляет собой пользовательский интерфейс.

Пример того, что у меня есть, в настоящее время мой index.js выглядит следующим образом:

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route exact path="/" component={AppComponent}/>
                <Route exact path="/products" component={ListProductComponent} />
                <Route path="/products/:productId" component={AddProductComponent} />
            </Switch>
        </Router>
    </Provider>
    , document.getElementById('root')
);

Компонент контейнера:

class ProductContainer extends React.Component {
    constructor(props) {
        super(props);
        this.fetchProducts = this.fetchProducts.bind(this)
    }

    fetchProducts = () => {
        this.props.dispatch(fetchProductsBegin());
        getSitesApi.getAll(1)
            .then(response => {
                if (response.data) {
                    this.props.dispatch(fetchProductsSuccess(response.data._embedded.companies));
                } else {
                    this.props.dispatch(fetchProductsFailure({message: "Fetching products failed"}));
                }
            });
    };

     addProduct = () => {

     };

    componentDidMount() {
        this.fetchProducts();
    }

    render() {
        const {products} = this.props;
        return (
            <div className="ProductComponent">
                <h2>ProductComponent</h2>
                <Button color="danger" onClick={this.fetchProducts}>Load Products</Button>
                <ListProductComponent products={products}/>
                <AddProductComponent/>
            </div>
        );
    }
}

const productSelector = createSelector(
    state => state.products,
    items => items,
    loading => loading,
    error => error,
);

const mapStateToProps = createSelector(
    productSelector,
    (products) => ({
        products,
    })
);

export default connect(mapStateToProps)(ProductContainer);

Компонент дампа:

import React from 'react';
import './product.style.scss';
import LoadingBar from "../LoadingStatus/loading.component";

const ListProductComponent = (props) => (
    <div className="ListProductComponent">
        <h2>ListProductComponent</h2>
        <LoadingBar loading={props.products.loading}/>
        <div>
            <ul>
                {
                    props.products.items.map((item, index) =>
                        <li key={index}>{item.name}</li>
                    )
                }
            </ul>
        </div>
    </div>
);

export default ListProductComponent

Еще один компонент дампа:

import React from 'react';
import './product.style.scss';

const AddProductComponent = (props) => (
    <div className="AddProductComponent">
        <h2>AddProductComponent</h2>
    </div>
);

export default AddProductComponent

Прежде всего, я не уверен, что в маршрутизаторе в index.js я должен всегда передавать компоненты контейнера или компоненты дампа в атрибуте компонента. Во-вторых, нужно ли для каждого списка продуктов добавлять товар в отдельные контейнеры? Так как в настоящее время у меня есть один контейнер для продуктов, который, например, будет выполнять грубые операции. Одна вещь, которая меня смущает, это то, что, если я хочу показать только компонент add dump, как я могу это сделать? или показать только список товаров?

Я не уверен, правильно ли я понимаю цель контейнеров, кто-нибудь может показать хороший пример, почему я бы пошел с подходом контейнера по обычному пути?