TypeError: Object (...) не является функцией (избыточный)

Question

У меня TypeError (TypeError: Object (...) не является функцией), когда я хочу отправить действие.Я не использую промежуточное программное обеспечение и не знаю, что я могу сделать, чтобы решить его.У меня была эта ошибка уже вчера, но каким-то образом удалось ее решить (я не знаю, как я это сделал)

Это App.js:

import React from "react";
import { store } from "../store";
import { withdrawMoney} from "../actions";

const App = () => {
return (
  <div className="app">
    <div className="card">
      <div className="card-header">
        Welcome to your bank account
      </div>
      <div className="card-body">
        <h1>Hello, {store.getState().name}!</h1>
        <ul className="list-group">
          <li className="list-group-item">
            <h4>Your total amount:</h4>
            {store.getState().balance}
          </li>
        </ul>
        <button className="btn btn-primary card-link" data-amount="5000" onClick={dispatchBtnAction}>Withdraw $5,000</button>
        <button className="btn btn-primary card-link" data-amount="10000" onClick={dispatchBtnAction}>Witdhraw $10,000</button>
      </div>
    </div>
  </div>
);
}

function dispatchBtnAction(e) {
  store.dispatch(withdrawMoney(e.target.dataset.amount));
}

export default App;

Вот создатель action:

function withdrawMoney(amount) {
  return {
    type: "ADD_TODO",
    amount
  }
}

Если вам нужен вот этот редуктор:

export default (state, action) => {
  console.log(action);
  return state
}

Как вы видите, я очень плохо знаком с редуксом, но я хотел бы знать, какую ошибку я совершаю все времяпри отправке действия.Спасибо

Answer 1

Попробуйте установить: npm, я реагирую @ next реаги-дом @ следующий и запускаюсь снова

const mapStateToProps = state => ({
Bank: state.Bank,
});

function mapDispatchToProps(dispatch) {
return {
  dispatch,    
  ...bindActionCreators({ getBanks, addBank }, dispatch)
  }
 }

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(BankComponent);

для меня это сработало.

Answer 2

Я считаю, что проблема в том, что вы не экспортируете функцию изъятия денег, поэтому вы не можете вызвать ее в компоненте, в который пытаетесь импортировать.

try:

export function withdrawMoney(amount) {
  return {
    type: "ADD_TODO",
    amount
  }
}

Answer 3

Возможно, это не главная проблема, но похоже, что вы не используете библиотеку React-Redux для работы с магазином.Вы можете ссылаться на магазин непосредственно в ваших компонентах React, но это плохая практика.См. мое объяснение, почему вы должны использовать React-Redux вместо написания "ручной" логики обработки хранилища .

Answer 4

Первая проблема, которую я сразу вижу, заключается в том, что ваш редуктор не настроен что-либо делать с отправленным создателем действий withdrawMoney.

export default (state, action) => {
  switch (action.type) {
    case "ADD_TODO": {
      return {
        ...state,
        amount: action.amount,
    };
  }
  default:
    return state;
  }
};

Если это не поможет, код из других ваших файлов будет полезен.