Как я могу создать контейнерный компонент в React-Redux

Question

У меня создано несколько компонентов, и каждый компонент использует connect(mapStateToProps, mapDispatchToProps) для извлечения данных из хранилища и отправки действий. Я хочу объединить их все в один контейнер и использовать этот контейнер.

Например:

Домашний компонент

class Home extends React.Component{

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

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

и Компонент корзины

class Cart extends React.Component{

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

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

Итак, здесь я хочу объединить их обоих и использовать один контейнер, переданный каждому из компонентов.

Answer 1

Вы можете выполнить это, используя redux-store функцию подключения только на ContainerComponent и передать каждому дочернему реквизиту, который Контейнер получил из хранилища.

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>
}