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")
);
what is in your store i think you should useDispatch hook to dispatch an action
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;
``