redux调度错误:未定义的错误
redux调度错误:未定义的错误
提问于 2021-11-03 09:02:38
我正在尝试用redux state management和react制作一个应用程序。我需要从API中fetch，并且我已经将所有API逻辑放在另一个文件中，我正在尝试将来自响应的数据放到state in redux中。我尝试过: API脚本文件：
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()
})但是，当我尝试这个方法时，我遇到了这个错误，当fetch函数被一个按钮调用时，按下一个错误。
错误信息：
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.如果有人有任何想法或建议，我非常感谢他们，我正试图找到解决这个错误的方法。
向阿尔文问好。
编辑：
存储文件：
//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")
);回答 2
Stack Overflow用户
回答已采纳
发布于 2021-11-03 12:04:40
实际上，你没有正确地出口商店。我认为您需要在单独的文件中创建存储，然后导出它。
文件结构应该是这样的-
-src
--index.js
--app.js
--store
---index.js
---reducers
----index.js现在在src/store/index.js文件中看起来是这样的-
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;如果您想要添加dev tools middleware和redux-thunk。
在src/store/reducers/index.js文件中，所有的还原器都将与combinedReducers模块绑定-
import { combineReducers } from "redux";
import BlogReducer from "./blogReducer";
import UserReducer from "./userReducer";
export default combineReducers({
blogStore: BlogReducer,
userStore: UserReducer,
});这里，BlogReducer和UserReducer与combineReducers绑定。你可以在这里加上你的-
现在在您的src/index.js文件中添加如下-
//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")
);在src/app.js中，您可以调用API并将其分配到redux存储-
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;
``Stack Overflow用户
发布于 2021-11-03 09:48:33
你商店里有什么我认为你应该用useDispatch钩子来调度一个动作
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69822125
复制相关文章
相似问题
腾讯云开发者
