React-Redux: Cannot read property 'closed' of undefined - reactjs

Question

I seem to have run into an issue when using dispatch() with React-Redux. For example, the following action:
export const fetchMetrics = () => {
dispatch(fetchMetricsBegin);
APIService.get('/dashboard/info/')
.then((response) => {
dispatch(fetchMetricsSuccess(response));
return response;
})
.catch(error => dispatch(fetchMetricsFailure(error)));
};
Produces the following error:
TypeError: Cannot read property 'closed' of undefineddispatch
src/internal/observable/pairs.ts:82
Here's my package.json:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#popperjs/core": "^2.6.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.6.0",
"axios": "^0.21.0",
"dotenv": "^8.2.0",
"jwt-decode": "^3.1.2",
"react": "^17.0.1",
"react-datepicker": "^3.3.0",
"react-dom": "^17.0.1",
"react-images-upload": "^1.2.8",
"react-number-format": "^4.4.1",
"react-popper": "^2.2.4",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"rxjs": "^6.6.3",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have tried purging node_module and package-lock.json, but the issue is still occurring. Would welcome any insight. Removing the dispatch calls removes the error.

Answer 1

you are using redux-thunk. this library will allow you to perform async calls since your function return another function with dispatch as param. otherwise thunk will execute the code sync.
export const fetchMetrics = () => (dispatch) => {
dispatch(fetchMetricsBegin);
APIService.get('/dashboard/info/')
.then((response) => {
dispatch(fetchMetricsSuccess(response));
return response;
})
.catch(error => dispatch(fetchMetricsFailure(error)));
};