Javascript 错误：操作必须是普通对象。使用自定义中间件进行异步操作Redux

我得到一个错误：动作必须是普通对象。使用自定义中间件进行异步操作。 经过紧张的搜索仍未能解决这一问题。我正在尝试从本地存储获取令牌。令牌在那里，但无法使其工作

因此，我的代码如下所示：

我的App.js

import React, { useEffect } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/store';

import MainLayout from '../src/components/layout/MainLayout/MainLayout';
import Landing from '../src/components/views/Landing/Landing';
import Login from '../src/components/features/Login/Login';
import Register from '../src/components/features/Register/RegisterContainer';
import Alerts from '../src/components/common/Alerts/AlertsContainer';

import { setAuthToken } from './utils/utils';
import { loadUser } from './redux/AuthReducer';

const App = () => {
  useEffect(() => {
    setAuthToken(localStorage.token);
    store.dispatch(loadUser());
  }, []);

  return (
    <Provider store={store}>
      <div>
        <BrowserRouter>
          <MainLayout>
            <Route exact path='/' component={Landing} />
            <section className='container'>
              <Alerts />
              <Switch>
                <Route exact path='/register' component={Register} />
                <Route exact path='/login' component={Login} />
              </Switch>
            </section>
          </MainLayout>
        </BrowserRouter>
      </div>
    </Provider>
  );
};

export default App;

我的减速机

import axios from 'axios';
import { setAlert } from './AlertReducer';
import { setAuthToken } from '../utils/utils';

/* action name creator */
const reducerName = 'auth';
const createActionName = (name) => `app/${reducerName}/${name}`;

/* action types */

export const REGISTER_SUCCESS = createActionName('REGISTER_SUCCESS');
export const REGISTER_FAIL = createActionName('REGISTER_FAIL');
export const USER_LOADED = createActionName('USER_LOADED');
export const AUTH_ERROR = createActionName('AUTH_ERROR');

/* action creators */

export const registerSuccesAction = (payload) => ({
  payload,
  type: REGISTER_SUCCESS,
});
export const registerFailAction = (payload) => ({
  payload,
  type: REGISTER_FAIL,
});
export const userLoadSuccess = (payload) => ({
  payload,
  type: USER_LOADED,
});
export const userAuthError = (payload) => ({
  payload,
  type: AUTH_ERROR,
});

/* actions THUNK */
//load user
export const loadUser = () => {
  return async (dispatch) => {
    if (localStorage.token) {
      dispatch(setAuthToken(localStorage.token));
    }
    try {
      const res = await axios.get('/api/auth');
      dispatch(userLoadSuccess(res.data));
    } catch (err) {
      dispatch(userAuthError({ name: 'AUTH_ERROR' }));
    }
  };
};

//post user
export const registerUser = ({ name, email, password }) => {
  return async (dispatch) => {
    const config = {
      headers: {
        'Content-Type': 'application/json',
      },
    };
    const body = JSON.stringify({ name, email, password });
    try {
      const res = await axios.post(
        '/api/users',
        //http://localhost:8000/api/users
        body,
        config
      );

      dispatch(registerSuccesAction(res.data));
    } catch (err) {
      const errors = err.response.data.errors;
      // console.log(err.response.request._response);

      if (errors) {
        errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
      }
      dispatch(registerFailAction({ name: 'REGISTER_FAIL' }));
    }
  };
};

/* initial state */

const initialState = {
  //store toke in localstorage
  token: localStorage.getItem('token'),
  isAuthenticated: null,
  loading: true,
  user: null,
};

/* reducer */

export default function reducer(state = initialState, action) {
  switch (action.type) {
    // register
    case REGISTER_SUCCESS:
      localStorage.setItem('token', action.payload.token);
      return {
        ...state,
        ...action.payload,
        isAuthenticated: true,
        loading: false,
      };
    case REGISTER_FAIL:
    case AUTH_ERROR:
      localStorage.removeItem('token');
      return {
        ...state,
        token: null,
        isAuthenticated: null,
        loading: false,
      };
    //user loading
    case USER_LOADED:
      return {
        ...state,
        isAuthenticated: true,
        loading: false,
        user: action.payload,
      };
    default:
      return state;
  }
}

我正在使用Thunk，但仍然无法使其工作。我发现的大多数解决方案都是关于人们在使用效果上缺少“（）”的

谢谢你的帮助

还有一件事 我试图在一个类组件中这样做，但这并没有让我更接近于解决这个问题

//编辑 这是setAuthToken

import axios from 'axios';

// set global default header for token stored in localstorage
export const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common['x-auth-token'] = token;
  } else {
    delete axios.defaults.headers.common['x-auth-token'];
  }
};

---

我想a有一个想法：你能介绍一下setAuthToken函数的实现吗。我要求您这样做，因为您正在使用dispatch调用此函数，但如果它未声明为Redux操作（返回另一个函数的函数），则您会遇到此类错误是正常的。done setAuthToken addedI似乎是正确的。尝试直接调用setAuthToken，而不使用dispatch-检查loadUser函数：只需删除围绕setAuthToken函数的dispatch（），然后告诉我它是否有效。PS：这同样适用于您尝试使用dispatch.yes调用的所有其他普通函数，而不是redux操作。这是工作！！！我很高兴我帮了忙。请投票支持我的评论，因为它们可能对其他人也有用。：）我想a有一个想法：你能介绍一下setAuthToken函数的实现吗。我要求您这样做，因为您正在使用dispatch调用此函数，但如果它未声明为Redux操作（返回另一个函数的函数），则您会遇到此类错误是正常的。done setAuthToken addedI似乎是正确的。尝试直接调用setAuthToken，而不使用dispatch-检查loadUser函数：只需删除围绕setAuthToken函数的dispatch（），然后告诉我它是否有效。PS：这同样适用于您尝试使用dispatch.yes调用的所有其他普通函数，而不是redux操作。这是工作！！！我很高兴我帮了忙。请投票支持我的评论，因为它们可能对其他人也有用。：）

import axios from 'axios';

// set global default header for token stored in localstorage
export const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common['x-auth-token'] = token;
  } else {
    delete axios.defaults.headers.common['x-auth-token'];
  }
};