CODEWITHSUNDEEP
reactjsreduxreact-reduxreact-hooks
Bomber
Bomber

Reputation: 10957

reactRedux.useDispatch is not a function

I am trying to use react-redux hooks, however I get the error:

TypeError: (0 , _reactRedux.useDispatch) is not a function

Any ideas?

...
import { useDispatch, useSelector } from "react-redux";
import { StackActions, NavigationActions } from "react-navigation";
import CustomImage from "./CustomImage";

const VideoEpisode = props => {
  const { id, title, description, video, preview, push, testLink } = props;
  const dispatch = useDispatch();
  return (
    <TouchableHighlight
      ....
      onPress={() => {
        const resetAction = StackActions.reset({
          ...
        });
        dispatch(resetAction);
      }}
    >
      ...
    </TouchableHighlight>
  );
};

export default VideoEpisode;

package.json

{
  "name": "iaapp",
  "version": "0.0.1",
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "name": "Innovative Anatomy",
    "flow": "flow",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/runtime": "^7.0.0",
    "@react-native-community/async-storage": "^1.6.1",
    "react": "16.8.5",
    "react-dom": "^16.8.6",
    "react-native": "0.59.10",
    "react-native-circular-progress": "^1.1.0",
    "react-native-component-fade": "^1.0.2",
    "react-native-elements": "^1.1.0",
    "react-native-fade": "^1.0.3",
    "react-native-fade-in-view": "^1.0.5",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-responsive-image": "^2.3.1",
    "react-native-share": "^1.2.1",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^9.5.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-view-shot": "^2.6.0",
    "react-native-webview": "^5.12.1",
    "react-native-webview-bridge": "^0.40.1",
    "react-navigation": "^3.0.9",
    "react-navigation-backhandler": "^1.3.2",
    "react-navigation-transitions": "^1.0.11",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/preset-flow": "^7.0.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "prettier": "^1.18.2",
    "react-native-dotenv": "^0.2.0",
    "redux-logger": "^3.0.6"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts"
    ]
  },
  "private": true
}

Upvotes: 4

Views: 14502

Answers (5)

Page not found
Page not found

Reputation: 3605

If you are a nextjs developer using the App Router make sure to add the

'use client'

directive to the file containing the functional component which uses useDispatch. <3

Upvotes: 10

Majdi Ajroud
Majdi Ajroud

Reputation: 31

try to upgrade redux and react-redux package to the last version

Upvotes: 0

Aman-D
Aman-D

Reputation: 71

I also came around the same problem, tried everything deleting the node modules, clearing cache installing appropriate react-redux version but nothing worked. Later I found that the action which I was passing was not in proper format. Recheck the action action passed to dispatch function.

Upvotes: 0

Mads Nielsen
Mads Nielsen

Reputation: 63

I had a similar problem with react.createcontext, and the only thing that seemed to work was to delete the node_modules folder and reinstall them (npm install).

Just make sure your package.json is configured correctly

Upvotes: 1

Sayog
Sayog

Reputation: 770

Try upgrading your redux version { useDispatch } don't work on older ones

Upvotes: 2

Related Questions