Действие отправки от ребенка с полезной нагрузкой (РЕАКТ)

Question

У меня есть следующий фрагмент кода в моем компоненте 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
};

Может кто-нибудь, пожалуйста, пролить свет на то, как мне отправить действие вместе с полезной нагрузкой.

Answer 1

Я не вижу 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))
}

Возможно, вы захотите взглянуть на официальный документ Redx здесь