如何在 React-Redux 中创建容器组件

Question

I have multiple components built and each component is using connect(mapStateToProps, mapDispatchToProps) to retrieve data from the store and dispatch actions. I want to combine them all in a single container and use that container.

For ex:

Home Component

class Home extends React.Component{

}
const mapStateToProps = (state) => {
    return {
        items: state.items
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        addToCart: (id) => {dispatch(addToCart(id))}
    }
}

and Cart Component

class Cart extends React.Component{

}
const mapStateToProps = (state) => {
    return {
        items: state.items
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        addToCart: (id) => {dispatch(addToCart(id))}
    }
}

So, here I want to combine both of them and use a single container passed each of the components.

Answer 1

You can perform that by use redux-store connect function only on the ContainerComponent and pass to each child props which the Container has receive from the store.

const mapPropsToState = (state) => {
    items: state.items,
    // .... other properties
}
connect(mapPropsToState, mapDispatchToProps)(ContainerComponent);

export class ContainerComponent extends Component {
    render = () => <div>
        <Child2Component items={this.props.item} />
        <Child2Component items={this.props.item} />
        // .... other component which need to access props receive from Store
    </div>
}