问redux调度错误:未定义的错误
EN

Stack Overflow用户

提问于 2021-11-03 01:02:38

回答 2查看 237关注 0票数 0

我正在尝试用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")
);

reactjs

redux

react-redux

frontend

javascript

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-11-03 04: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;
``