反应 redux 调度错误：未定义的错误

Question

我正在尝试使用redux state management 和react 制作应用程序。我需要来自 API 的fetch，并且我已将所有 API 逻辑放在另一个文件中，我试图将来自state 的响应中的数据放在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")
);

Answer 1

实际上，您没有正确导出商店。我认为您需要在单独的文件中创建商店，然后将其导出。

文件结构应该是这样的-

-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 文件中，所有reducer 都与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 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;
``

Answer 2

你的商店里有什么我认为你应该使用 Dispatch 挂钩来调度一个动作