React redux dispatch error: undifined error

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

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

Answer 2

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

文件结构应该是这样的-

-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;
``

React redux dispatch error: undifined error

React redux dispatch error: undifined error

javascript

frontend

reactjs

redux

react-redux