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

我非常确定我正在返回一个对象，并且已经使用了asyn并在我的操作文件中等待承诺。但这仍然会重复错误

redux.js:205未捕获错误：操作必须是普通对象。将自定义中间件用于异步操作

我的操作文件正在返回一个对象

import axios from "axios";

export const LOAD_URL_STATUS = "LOAD_URL_STATUS";

export async function loadUrlStatus(url) {
  const request = await axios
    .get(url)
    .then(response => {
      console.log(response.status);
      return response.status;
    })
    .catch(error => {
      console.log("Looks like there was a problem: \n", error);
    });
  console.log(request);
  console.log(LOAD_URL_STATUS);
  return {
    type: LOAD_URL_STATUS,
    payload: request
  };
}

在componendimount

this.props.loadUrlStatus（url）中调用此操作时失败

组成部分

import React from 'react';
import TrafficLight from '../TrafficLight';
import {connect} from 'react-redux';
import {loadUrlStatus} from "../../actions";
//import {withPolling} from "../Polling";
//import Polling from "../Polling/polling";
import { bindActionCreators } from 'redux';

class TrafficLightContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      redOn: true,
      yellowOn: false,
      greenOn: false,
    }
  }

  componentDidMount(){
console.log("componentDidMount")
const {pollingAction, duration, url} = this.props
    //withPolling(this.props.loadUrlStatus(this.props.url),1)
    /*
    const {pollingAction, duration, url} = this.props
    this.dataPolling = setInterval(
                    () => {
                        this.props.loadUrlStatus(url);
                    },
                    10000);
*/
this.props.loadUrlStatus(url);
  };

  componentWillUnmount() {
                clearInterval(this.dataPolling);
            }

  render() {
    console.log(this.props)
    return (
      <TrafficLight
        Size={100}
        onRedClick={() => this.setState({ redOn: !this.state.redOn })}
        onGreenClick={() => this.setState({ greenOn: !this.state.greenOn })}
        RedOn={this.state.redOn}
        GreenOn={this.state.greenOn}
      />
    )
  }
}

const mapStateToProps = state => ({
    ...state
});
const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
        loadUrlStatus
    },
    dispatch
  );
};

export default (
    connect(mapStateToProps, mapDispatchToProps)(TrafficLightContainer));

从“React”导入React；
从“../TrafficLight”导入TrafficLight；
从'react redux'导入{connect}；
从“../../actions”导入{loadUrlStatus}；
//从“./轮询”导入{withPolling}；
//从“./轮询/轮询”导入轮询；
从“redux”导入{bindActionCreators}；
类TrafficLightContainer扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
雷东：没错，
黄龙：错，
格林农：错，
}
}
componentDidMount（）{
console.log（“componentDidMount”）
const{pollingAction，duration，url}=this.props
//withPolling（this.props.loadUrlStatus（this.props.url），1）
/*
const{pollingAction，duration，url}=this.props
this.dataPolling=setInterval(
() => {
this.props.loadUrlStatus（url）；
},
10000);
*/
this.props.loadUrlStatus（url）；
};
组件将卸载（）{
clearInterval（这是dataPolling）；
}
render（）{
console.log（this.props）
返回(
this.setState（{redOn:！this.state.redOn}）
onGreenClick={（）=>this.setState（{greenOn:！this.state.greenOn}）}
RedOn={this.state.RedOn}
GreenOn={this.state.GreenOn}
/>
)
}
}
常量mapStateToProps=状态=>({
状态
});
const mapDispatchToProps=调度=>{
返回bindActionCreators(
{
loadUrlStatus
},
派遣
);
};
导出默认值(
连接（MapStateTrops、mapDispatchToProps）（TrafficLightContainer））；

索引

从“React”导入React；
从'react dom'导入{render}
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从'react redux'导入{Provider}；
从“./configureStore”导入configureStore
const store=configureStore（）；
常量renderApp=（）=>
渲染(
,
document.getElementById（'root'））
);
if（process.env.NODE_env！==“production”和&module.hot）{
module.hot.accept（'./App'，renderApp）
}
renderApp（）；
serviceWorker.unregister（）；
问题在于
loadUrlStatus
是异步函数，因此它返回的不是object，而是Promise，以及Promise中的object

要更正此问题，请修改
loadUrlStatus
，使其返回另一个函数。由于您已经在商店创建期间应用了thunk中间件，因此将在redux中调用此函数。（您可以看到异步函数的示例）

如果在动作创建者中使用
wait
，则需要从动作创建者返回一个函数。否则，返回对象。像这样的图书馆可以帮你做到这一点

您的动作创建者将如下所示：

import axios from "axios";

export const LOAD_URL_STATUS = "LOAD_URL_STATUS";

export const loadUrlStatus(url) => async dispatch => {
  try {
    const response = await axios(url)

    dispatch({
      type: LOAD_URL_STATUS,
      payload: response.status
    })
  } catch (error) {
    // dispatch error
  }
}

在问题中张贴相关代码。问题应该是独立的。我们不应该为了对问题进行初步审查而离开现场。演示很好，但只是作为对问题中实际存在内容的支持itself@shorif2000我不知道；我看不到任何行动。actions\index.js为空…@Fyodor我已更新沙盒
export function  loadUrlStatus(url) {
    // Immediately return another function, which will accept dispatch as first argument. It will be called inside Redux by thunk middleware
    return async function (dispatch) {
        const request = await axios
            .get(url)
            .then(response => {
                console.log(response.status);
                return response.status;
            })
            .catch(error => {
                console.log("Looks like there was a problem: \n", error);
            });
            console.log(request);
            console.log(LOAD_URL_STATUS);
            dispatch ({
                type: LOAD_URL_STATUS,
                payload: request
            });
    }
}

import axios from "axios";

export const LOAD_URL_STATUS = "LOAD_URL_STATUS";

export const loadUrlStatus(url) => async dispatch => {
  try {
    const response = await axios(url)

    dispatch({
      type: LOAD_URL_STATUS,
      payload: response.status
    })
  } catch (error) {
    // dispatch error
  }
}