修复错误：动作必须是普通对象。相反，实际类型是：“未定义”。您可能需要将中间件添加到您的商店设置中

Posted 2023-02-22

【中文标题】修复错误：动作必须是普通对象。相反，实际类型是：“未定义”。您可能需要将中间件添加到您的商店设置中

【英文标题】：Fix the error: Actions must be plain objects. Instead, the actual type was: 'undefined'. You may need to add middleware to your store setup

【发布时间】：2021-12-23 19:30:44

【问题描述】：

我的错误信息：

“错误：动作必须是普通对象。相反，实际类型是：'undefined'。您可能需要在 store 设置中添加中间件来处理调度其他值，例如 'redux-thunk' 来处理调度函数. 参见https://redux.js.org/tutorials/fundamentals/part-4-store#middleware 和https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware 示例。”

我找到了很多关于这个错误的答案，但没有一个对我有帮助。

我在我的 react 应用中存储了一些部分。最后一部分，犯错误。

我真的很困惑，按照所有的答案，我应该如何创建商店。

我的 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import '../node_modules/video-react/dist/video-react.css'; // import css
import thunk from 'redux-thunk';
import  BrowserRouter  from 'react-router-dom';
import  Provider  from 'react-redux';
import  combineReducers,compose ,applyMiddleware,createStore  from 'redux';
import  file, user,school,student  from "./Utilities/store/reducers";

const combine = combineReducers(
  
    filePart: file,
    userPart: user,
    schoolPart:school,
    student:student
  
);




ReactDOM.render(<BrowserRouter>

  <Provider store=createStore(combine, applyMiddleware(thunk))>

    <App />
  </Provider>
</BrowserRouter>, document.getElementById('root'));

student.js 减速器：

import type from './../functions/student'
import * as functions from './../functions/student'
const initilize = 
    all: [],
    schools:[],
    courses:[]
;

export const student = (state = initilize, action) => 
    switch (action.type) 
        case type.get: return functions.getCurrent(state);
        case type.fill: return functions.fill(state,action.payload);
    
    return state;

student.js 操作：

import * as functions from './../functions/student'
import  type  from './../functions/student'


export const getCurrent = () => 
    return  type: type.get ;


export const fill = (post) => 
    return  type: type.fill, payload: post 



export const get = (students, teacherId) => 
    if (students && students.all.length > 0) 
        getCurrent();
    
    if (students === undefined || students.all.length === 0) 
        return async(dispatch) => 
            let result = await functions.get(teacherId);
            dispatch(fill(result));
        
    
    else
    getCurrent();

当我调用操作 get() 时发生错误。

【参考方案1】：

如果 (students === undefined || students.all.length === 0) 不是true，则该方法不会返回任何内容。 但是你 dispatch(get(students, teacherId)) 在某个地方，所以本质上是你 dispatch(undefined)

让它总是返回一些东西：

export const get = (students, teacherId) => 
  return async(dispatch) => 
    if (students && students.all.length > 0) 
        getCurrent();
    
    if (students === undefined || students.all.length === 0) 
            let result = await functions.get(teacherId);
            dispatch(fill(result));
        
    
  

【讨论】：

好的，谢谢，我对函数 get() 有 'else'，它没有帮助。

您注意到在我的建议中我完全改造了您的功能吗？

谢谢！有用。这是否意味着如果您使用异步（调度），您应该将整个函数包装在其中？因此，错误的真正含义是确实返回了一个未定义的值，而问题不在于 createStore，正如我在其他答案中看到的那样。

好吧，如果你调度你的函数，它必须返回商店接受的 something。这可以是一个动作，也可以是一个 thunk 函数（毫无疑问，它什么都不做）。