Как перевести функцию logi c в редуктор для обновления состояния

Question

В моем файле есть подпорка canPurchase, которую я хочу обновить (переключить) с помощью редуктора.

Мое приложение работает, когда лог c для обновления подпорки canPurchase находится в тот же файл, однако, когда я перемещаю logi c в редуктор, он не работает. Что я делаю не так?

burgerbuilder. js файл:

class BurgerBuilder extends Component {
  state = {
    orderInProgress: false,
    loading: false,
    error: false
  };

  render() {

 let burger = this.state.error ? (
      <p>Ingredients can't be loaded </p>
    ) : (
      <Spinner />
    );
      burger = (
        <Aux>
          <Burger ingredients={this.props.ings} />
          <BuildControls
            ingredientAdded={this.props.onIngredientAdded}
            ingredientRemoved={this.props.onIngredientRemoved}
            disabled={disabledInfo}
            canPurchase={updatePurchaseState(this.props.ings)}
            price={this.props.price}
            ordered={this.orderInProgressHandler}
          />
        </Aux>
      );
    }
    return (
      <Aux>
        <Modal
          show={this.state.orderInProgress}
          modalClosed={this.orderCancelHandler}
        />

        {burger}
      </Aux>
    );
  }
}
/
const mapStateToProps = state => {
  return {
    ings: state.ingredients,
    price: state.totalPrice,
    canPurchase: state.canPurchase
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onIngredientAdded: ingNamePayload =>
      dispatch({ type: actionTypes.ADD_INGREDIENT, payload: ingNamePayload }),

    onIngredientRemoved: ingNamePayload =>
      dispatch({ type: actionTypes.REMOVE_INGREDIENT, payload: ingNamePayload })
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withErrorHandler(BurgerBuilder, axios));

редуктор. js

import PropTypes from "react";

const initialState = {
  ingredients: {
    salad: 0,
    bacon: 0,
    cheese: 0,
    meat: 0
  },
  totalPrice: 0,
  canPurchase: false
};

const INGREDIENT_PRICES = {
  salad: 0.5,
  cheese: 0.4,
  meat: 1.3,
  bacon: 0.7
};

const updatePurchaseState = ingredients => {
  const sum = Object.keys(ingredients)
    .map(igKey => {
      return ingredients[igKey]; 
    })
    .reduce((sum, el) => {
      return sum + el;
    }, 0); 
  return sum > 0; 
};

const reducer = (state = initialState, action) => {

  switch (action.type) {
    case actionTypes.ADD_INGREDIENT:
      return {
        ...state,
        ingredients: {
          ...state.ingredients,
          [action.payload]: state.ingredients[action.payload] + 1 

        },
        totalPrice: state.totalPrice + INGREDIENT_PRICES[action.payload],
        canPurchase: updatePurchaseState(state.ingredients)
      };

    default:
      return state;
  }
};

export default reducer;

вещь, которую я переключаю

<button onClick={props.ordered} className={classes.OrderButton} disabled={!props.canPurchase}>
        ORDER NOW
      </button>`

если вам нужна дополнительная информация, дайте мне знать.

спасибо

Answer 1

{this.orderInProgressHandler} вызывается как упорядоченный реквизит в компоненте BuildControls и используется кнопкой onClick, где его определение?