带有有效负载的子节点的调度操作 (REACT)答案

【问题标题】：Dispatch action from child with payload (REACT)带有有效负载的子节点的调度操作 (REACT)
【发布时间】：2020-01-09 23:23:56
【问题描述】：

我的 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
};

有人可以说明我如何与有效负载一起发送动作。

【问题讨论】：

标签： javascript reactjs react-native redux react-redux

【解决方案1】：

我在您的mapDispatchToProps 或您提供的代码中的任何地方都没有看到dispatch。

您的 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

【讨论】：