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

Question

I am having a TypeError (TypeError: Object(...) is not a function) when I want to dispatch an action. I'm not using any middleware and don't know what I can do to solve it. I had this error already yesterday but somehow managed to solve it (i donk know how i did this)

This is the 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;

Here is the actioncreator:

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

If you need here is the reducer:

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

As you can see I'm a very new to redux but I'd like to know what mistake I make all the time when dispatching an action. Thanks

Answer 1

I believe the issue is that you aren't exporting the withdrawMoney function, so you aren't able to call it in the component that you're attempting to import into.

try:

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

Answer 2

Another subtle mistake that will cause this error is what I tried to do, don't accidentally do this:

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

it should be:

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