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;

这是actioncreator：

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

如果您需要减压器：

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

正如你所看到的，我对redux来说是一个新手，但我想知道在调度动作时我总是犯了什么错误。感谢

Answer 1

另一个会导致此错误的细微错误是我尝试执行的操作，请不要无意间这样做：

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

应该是：

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

Answer 2

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

尝试：

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

Answer 3

尝试安装： npm我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

我立即看到的第一个问题是你的减速器没有设置为派遣withdrawMoney动作创建者做任何事情。

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

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

Answer 6

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

Answer 7

我花了几个小时来调试它，事实证明我正在这样做：

import React, { connect } from "react";

代替

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

奇怪的是前者没有抛出错误，但是会引起问题！

Answer 8

将 react-redux 更新到 7.2.0+ 版本后，我每次写信时都会收到此错误：

const dispatch = useDispatch()

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

TypeError：Object（...）不是函数（redux）

8 个答案: