my error message:

"Error: Actions must be plain objects. Instead, the actual type was: 'undefined'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples."

I found many answers to this error, but none helped me.

I have store in my react app, with some parts. the last part, make the error.

I'm really confused, following all the answers, how should I create the store.

my index.js file:

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 reducer:

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 action:

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();
}

The error occurs when I call the action get().

CodePudding user response：

If (students === undefined || students.all.length === 0) is not true, that method does not return anything. But you dispatch(get(students, teacherId)) somewhere, so essentially you dispatch(undefined)

Make it always return something:

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