我的chid组件中包含以下代码
export const PayPalSecureMessage = (props: TProps) => {
let ecValue = { ecToken: "", paymentDetails: {} };
const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });
const createOrder = async (data, actions) => {
ecValue = await getECToken(
props.orderTotal,
true
);
return ecValue.ecToken;
};
return (
<div>
<PayPalButton
env="sandbox"
createOrder={createOrder}
/>
</div>
)
};
这是容器代码
const mapStateToProps = createStructuredSelector({
isSummaryFailed: getPaymentsFailure,
orderTotal: getOrderTotal,
hasSubscription: getSubscriptionItemPresence
});
如您所见,我具有mapStateToProps,因此父组件中的任何内容都会发生变化,由于上面的这种映射,我将能够更新我的子组件。
现在,我想从子组件中分派动作。您在上方看到的createOrder
实际上是在单击按钮时调用的。但我需要将此操作调用传递有效负载数据。
像这样
const mapDispatchToProps = {
createOrder: callCreateOrder(payload), //how to pass payload with action dispatcher here?
removeCard: removeGiftCard
};
有人可以阐明我如何与有效载荷一起调度动作。
答案 0 :(得分:0)
在您的dispatch
或提供的代码中的任何地方都没有看到mapDispatchToProps
。
您的mapDispatchToProps
应该类似于(根据文档):
const mapDispatchToProps = dispatch => {
return {
// dispatching plain actions
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT' }),
reset: () => dispatch({ type: 'RESET' })
}
}
您通过执行此操作发送了有效负载
increment: () => dispatch({ type: 'INCREMENT', payload: whateverNumYouWantToIncre })
或者如果您这样定义mapDispatchToProps
,那么您的有效负载就可以直接放在已分派动作的括号内。
const mapDispatchToProps = (dispatch, ownProps) => {
toggleTodo: () => dispatch(toggleTodo(ownProps.todoId))
}
您可能想看看redux here
的正式文档