React redux dispatch error: undefined error

I am trying to make an App with redux state management and react. I need to fetch from an API, and I have put all the API logic in another file, I am trying to put the data from the response to the state in redux.

I have tried - API script file:

import store from "./store";
import foo from "./foo.js";

fetch("http://my_fantastic_api.com/fooBar/");
.then((response)=>{
   if (reponse.status.OK){
       //The error:
     store.dispatch({
      type:"MODIFY_XYZ"
     });
  }
}).catch(error =>{
   throw new error()
})

But when I tried this method I ran into this error when the fetch function is called by a button press an error occurred.

The error message:

Unhandled Rejection (Error): When called with an action of type "MODIFY_XYZ", the slice reducer for key "FOO_BAR" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.

I am trying to find a solution to this error if anyone has any ideas or suggestions I greatly appreciate them.

kind regards Alvin.

EDIT:

store file:

//Importing packages
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App.jsx";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./redux/reducers/index.js";

//Redux configuration
export const store = createStore(reducers);

//Render app
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Actually, you didn't export the store properly. I think you need to create the store in separate file then export it.

The file structure should be like this-

-src
--index.js
--app.js
--store
---index.js
---reducers
----index.js

---

Now in src/store/index.js file will look like this-

import { createStore, applyMiddleware } from "redux";
import thunkMiddleware from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

import Reducers from "./reducers";

const middlewares = applyMiddleware(thunkMiddleware);
const enhancers = [middlewares];
const composedEnhancers = composeWithDevTools(...enhancers);

const store = createStore(Reducers, undefined, composedEnhancers);

export default store;

If you want to add the dev tools middleware and redux-thunk.

---

In src/store/reducers/index.js file will have all of the reducers bind with combinedReducers module-

import { combineReducers } from "redux";

import BlogReducer from "./blogReducer";
import UserReducer from "./userReducer";

export default combineReducers({
  blogStore: BlogReducer,
  userStore: UserReducer,
});

Here BlogReducer and UserReducer bind with combineReducers. You can add yours here-

---

Now in your src/index.js file add like this-

//Importing packages
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App.jsx";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./store";


//Render app
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

---

In src/app.js you can call the API and dispatch it into the redux store-

import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

const App = () => {
  //Get dispatch from useDispatch hook
  const dispatch = useDispatch();
  
  //Get store from useSelector hook
  const store = useSelector( store => store)

  const getApiResponse = () => {
     fetch("http://my_fantastic_api.com/fooBar/");
    .then((response)=>{
       if (reponse.status.OK){
       //The error:
         dispatch({type:"MODIFY_XYZ"});
      }
    }).catch(error =>{
     throw new error()
    })
  }
  
  useEffect( () => {
    getApiResponse()
  },[])

  return (
    <h1> Hello World! </h1>
  )
}

export default App;
``