Могу ли я передать несколько компонентов в Connect Redux

Question

Я хотел бы иметь интеллектуальный компонент / контейнер, который обрабатывает операции CRUD для объекта Product, и у меня есть следующий код:

function productContainerRender(WrappedComponent) {
    return class extends React.Component {
        constructor(props) {
            super(props);
            this.fetchProducts = this.fetchProducts.bind(this);
        }

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

        componentDidMount() {
            // this.fetchProducts(1);
        }

        render() {
            // ... and renders the wrapped component with the fresh data!
            // Notice that we pass through any additional props
            return <WrappedComponent {...this.props} fetchProducts={this.fetchProducts} />;
        }
    }
}

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

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

const ListProducts = productContainerRender(
    ListProductComponent
);

const AddProduct = productContainerRender(
    AddProductComponent
);

export default connect(mapStateToProps)(ListProducts,AddProduct);

Когда я пытаюсь вызвать компонент приложения, он всегда отображается

Любая идея, как сделать так, чтобы я мог экспортировать оба ListProducts, AddProduct и звонить из любого места в приложении.

Answer 1

Вы не можете вернуть несколько компонентов одновременно одним вызовом connect, помните, что вы export default, и вы должны вернуть только одну функцию / компонент, помните, что connect возвращает только один компонент ввремя, так что вы можете сделать это как

export default {
  ListProduct: connect(mapStateToProps)(ListProducts),
  AddProduct: connect(mapStateToProps)(AddProduct)
}

Так что при импорте компонентов вы можете сделать

import Components from ‘.../your/path’;
class MyView extends React.Component{
  render(){
    return <Components.ListProducts/>
  }
}

Answer 2

Вы можете передать только один компонент для подключения.Таким образом, вместо этого вам придется выполнить два соединения:

const ConnectedListProducts = connect(mapStateToProps)(ListProducts)
const ConnectedAddProduct = connect(mapStateToProps)(AddProduct)

Поскольку вы можете иметь только один экспорт по умолчанию, вам придется использовать именованный экспорт в этом случае или разделить эти два компонента на двафайлы.