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

[gabhiiaf93]

I am getting this error when I am trying to use useDispatch/useSelector

My package.json has "dependencies": { "@walmart/react-native-shared-library": "^8.3.0", "ern-navigation": "1.2.1", "moment": "^2.9.0", "react": "16.8.6", "react-native": "0.60.6", "react-redux": "^7.2.0", "redux": "^4.0.5", "redux-thunk": "^2.3.0" },

And my file has: import React, { useState, useEffect } from 'react'; //Constants import actionTypes from '../../constants/actionTypes'; import {setPurchasedPLans} from '../../redux/actions/managePlans.action'; import {EMPTY_ARRAY, EMPTY_OBJECT} from '../../constants/reference.constants'; import {STATUS, STATUS_TEXT, CLAIM_OPEN} from '../../constants/careplan.constant'; import get from "lodash/get"; import { useSelector, useDispatch } from 'react-redux'; //API import API from '../../api/index';

//Components import TabbedView from './tabbedview/TabbedView'; import { Dimensions } from 'react-native'; import ThemeProvider from '@walmart/react-native-shared-library/src/theme-provider'; // TODO See if we really need to import LDI or any other theme. This should have ideally been // handled by the theme provider import LD1Theme from '@walmart/react-native-shared-library/src/styles/living-design-1'; // import LD2Theme from '@walmart/react-native-shared-library/src/styles/living-design-2';

const Wpp = () => { const setScreenHeightHandler = (windowHeight, screenHeight) => { setWindowHeight(windowHeight); setScreenHeight(screenHeight); } const dispatch = useDispatch();

fetchPurchasedPlans = async() => {
    const response = await API.getPurchasedPlans();
    const {payload: { dataContent }} = response;
    const { purchasedPlans } = dataContent;
    **dispatch(setPurchasedPLans(purchasedPlans));**
}

setFilteredPlans = (activeFilters) => {
    const filteredPurchasedPlans = activeFilters.length > 0
    ? getFilteredPlans(activeFilters)
    : purchasedPlans;
    setFilteredPurchasedPlans(filteredPurchasedPlans);
};

applyFilterHandler = (appliedFilters) => {
    setShowFilter(false);
    setAppliedFilters(appliedFilters);
    setFilteredPlans(appliedFilters);
};

showFilterHandler = () => {
    setShowFilter(true);
}

resetFilterHandler = () => {
    setShowFilter(false);
    setAppliedFilters(EMPTY_ARRAY);
    setFilteredPurchasedPlans(EMPTY_ARRAY);
}

onTabChange = (selectedTabId) => {
    setSelectedTabId(selectedTabId)
    const managePlanId = get(tabs, "[0].id", 0);
    if(selectedTabId === managePlanId) {
        updateState(
            {
                type: actionTypes.FETCH_PROTECTION_PLANS
            }
        );
        fetchPurchasedPlans();
    }

};

return(
    <ThemeProvider theme={ LD1Theme }>
            <TabbedView 
                tabs = {tabs} 
                onTabChange={onTabChange} 
                selectedTabId={selectedTabId} 
                purchasedPlans = {purchasedPlans} 
                windowHeight={windowHeight}
                screenHeight={screenHeight}
                showFilter={showFilter}
                loading={loading}
                showFilterHandler={showFilterHandler}
                applyFilterHandler={applyFilterHandler}
                resetFilterHandler={resetFilterHandler}
                onSelectFilterHandler={onSelectFilterHandler}
                appliedFilters={appliedFilters}
                filteredPurchasedPlans={filteredPurchasedPlans}
                />

        </ThemeProvider>
);

};

export default Wpp;

Two things:

• useDispatch is a React-Redux API. Since this repo is for Redux Thunk, this is the wrong place to file an issue.
• The useDispatch API definitely exists, so whatever's going on is a problem with your build environment.

Sure thanks, was new to posting questions here.

[gabhiiaf93]

Also when I look into my node modules I get export function useDispatch<TDispatch = Dispatch>(): TDispatch; as a named import which means my version of react-redux should have support for useDispatch. Kindly help me with this issue.

[markerikson]

Two things:

• useDispatch is a React-Redux API. Since this repo is for Redux Thunk, this is the wrong place to file an issue.
• The useDispatch API definitely exists, so whatever's going on is a problem with your build environment.