时间戳

首页 > 解决方案 > React redux调度错误：未定义错误

javascript - React redux调度错误：未定义错误

问题描述

我正在尝试使用redux state managementand制作应用程序react。我需要fetch从一个 API 中获取，并且我已将所有 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")
);

标签： javascriptreactjsreduxreact-reduxfrontend

解决方案

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

文件结构应该是这样的——

-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 middlewareand redux-thunk。

在src/store/reducers/index.js文件中，所有减速器都与 combineReducers 模块绑定 -

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")
);

您可以调用 API 并将其分派到src/app.jsredux 存储中-

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

推荐阅读