TypeError: Object(...) is not a function (redux)

Question

当我想调度一个动作时，我遇到了一个 TypeError（TypeError: Object(...) is not a function）。我没有使用任何中间件，也不知道我能做些什么来解决它。我昨天已经遇到了这个错误，但不知何故设法解决了它（我不知道我是怎么做到的）

这是 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;

这里是动作创建者：

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

如果你需要这里是reducer：

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

如您所见，我是 redux 的新手，但我想知道我在调度操作时总是犯什么错误。谢谢

Answer 1

我认为问题在于您没有导出withdrawMoney 函数，因此您无法在尝试导入的组件中调用它。

尝试：

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

Answer 2

另一个会导致此错误的细微错误是我尝试做的，不要意外这样做：

import React, { useSelector, useState ... } from 'react'

应该是：

import React, { useState } from 'react'
import { useSelector } from 'react-redux'

Answer 3

尝试安装： npm i react@next react-dom@next 并再次运行

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

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

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

这对我来说就像一个魅力。

Answer 4

派对有点晚了， 对我来说，这是关于套管。

export const addTodo = text => ({
  type: ADD_TODO,
  desc: text
});
export const removeTodo = id=> ({
  type: REMOVE_TODO,
  id: id
})  
export const increaseCount = () => ({
  type: INCREASE_COUNT
});
export const decreaseCount = () => ({
  type: DECREASE_COUNT
})

当我重命名所有喜欢的人时

export const AddTodo = text => ({
  type: ADD_TODO,
  desc: text
});
export const RemoveTodo = id => ({
  type: REMOVE_TODO,
  id: id
})  
export const IncreaseCount = () => ({
  type: INCREASE_COUNT
});
export const DecreaseCount = () => ({
  type: DECREASE_COUNT
})

成功了。

Answer 5

我花了几个小时调试这个，结果我正在这样做：

import React, { connect } from "react";

而不是

import React from "react";
import { connect } from "react-redux";

奇怪的是前者没有抛出错误，但它会导致问题！

Answer 6

我马上看到的第一个问题是你的减速器没有设置为对调度的withdrawMoney 动作创建者做任何事情。

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

如果这没有帮助，您其他文件中的代码会有所帮助。

Answer 7

这可能不是主要问题，但看起来您没有使用 React-Redux 库来处理商店。你可以直接在你的 React 组件中引用 store，但这是一个不好的做法。见my explanation for why you should be using React-Redux instead of writing "manual" store handling logic。

Answer 8

在将react-redux 更新到版本 7.2.0+ 后，我在任何时候都收到此错误：

const dispatch = useDispatch()

我停止了我的应用程序并使用 npm start 重新运行它，现在一切正常。