我怎样才能触发派遣？

Question

我无法在我的 redux 应用程序中触发调度。这是我的容器/其中的一部分：

render() {
    debugger;
    var Packs = [];
    if (this.props.packsData != undefined  && this.props.packsData.existingFoxtelPackage != undefined) {
        if (this.props.packsData.existingFoxtelPackage.eligiblePacks.length > 0) {

            Packs = this.props.packsData.existingFoxtelPackage.eligiblePacks;

            console.log('testing=Packs', Packs);
        }
    }

    return (
        <div>hello from Packscontainer!!!
            <div>
                {
                    Packs.map(pack =>
                        <Pack id={pack.id} name={pack.name} addToCart={() => store.dispatch({type:'ADD_TO_CART',id:pack.id})}/>
                    )}
            </div>
        </div>
    )
}

子 Pack 组件部分如下所示：

render() {
        const { addToCart } = this.props
       return (
            <div>hello from pack
                {this.props.id} - {this.props.name}

                <button onClick={addToCart}>Add to cart</button>
            </div>
        )
    }

这是减速器：

const initialState = {
    cartIds: []
}

const Cart = (state = initialState.cartIds, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            debugger;
            return [...state, action.id]
        default:
            return state
    }
}

export default Cart;

如何使用 addToCart 触发发货？

Answer 1

如果您以正确的方式使用 redux，dispatch 将作为 prop 注入到您的容器中。所以你容器中的代码应该是这样的：

render() {
    debugger;
    var Packs = [];
    if (this.props.packsData != undefined  && this.props.packsData.existingFoxtelPackage != undefined) {
        if (this.props.packsData.existingFoxtelPackage.eligiblePacks.length > 0) {

            Packs = this.props.packsData.existingFoxtelPackage.eligiblePacks;

            console.log('testing=Packs', Packs);
        }
    }

    return (
        <div>hello from Packscontainer!!!
            <div>
                {
                    Packs.map(pack =>
                        <Pack id={pack.id} name={pack.name} addToCart={this.onAddToCart.bind(this, pack.id)}/>
                    )}
            </div>
        </div>
    )
}

onAddToCart(id)
    this.props.dispatch({type:'ADD_TO_CART',id:id});
}

我怎样才能触发派遣？

How can I trigger a dispatch?

reactjs

react-redux