代码之家 › 专栏 › 技术社区 › Mizlul

我能在Connect Redux中传递多个组件吗

react-redux reactjs javascript

0

Mizlul · 技术社区 · 7 年前

我想要一个智能组件/容器来处理产品实体的CRUD操作,我有以下代码:

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和call。

2 回复 | 直到 7 年前

1

0

inyono 7 年前

只能传递一个组件进行连接。因此,相反,您必须进行两次连接:

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

由于只能有一个默认导出,因此在这种情况下,必须使用命名导出,或者将这两个组件拆分为两个文件。

2

Juorder Gonzalez 7 年前

一次调用可以同时返回多个组件 connect ,记住你是 export default 您应该只返回一个函数/组件,记住 连接 一次只返回一个组件,因此可以这样做

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

所以当导入组件时,您可以

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