异步操作 Redux 未处理拒绝（错误）：操作必须是普通对象。使用自定义中间件进行异步操作答案

【问题标题】：Async Action Redux Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions异步操作 Redux 未处理拒绝（错误）：操作必须是普通对象。使用自定义中间件进行异步操作
【发布时间】：2020-03-31 04:13:33
【问题描述】：

我有一个使用 redux-thunk 的 react 项目。我创建了一个将到达端点的操作，然后将存储设置为接收到的数据。目前，我正在使用 .then 但是当我在 componentdidmount 中调用操作时，数据不存在。组件在数据可用之前呈现。为了解决这个问题，我决定将我的操作转换为异步操作，然后在我的 componentdidmount 中等待。问题是，一旦我将 async 放入我的操作中，我就会收到此错误....

Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions.

这是我的代码

动作

export const getCasesSuccess = async (data) => {
    return {
        type: GET_ALL_CASES,
        data
    }
};

export const getAllCases = () => {
    return (dispatch) => {
        axios.get('https://corona.lmao.ninja/all')
        .then(res => {
            const cases = res.data
            dispatch(getCasesSuccess(cases))
        })
        .catch(error => {
            throw(error)
        })
    }
}

调用动作的组件

import React from "react";
import { connect } from "react-redux";
import { getAllCases } from "../../store/actions/index";
import AllCases from '../../components/allcases/allCases';

class DataContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }

    componentDidMount = async () => {        
        await this.props.getAllCases() 
    }


    render() { 
        return ( 
            <div>
                <AllCases allCases={this.props.allCases} />
            </div>
         );
    }
}

const mapStateToProps = (state) => (
    {
      allCases: state.allCases
    }
  )

const mapDispatchToProps = dispatch => {
  return {
    getAllCases: () => dispatch(getAllCases()),
  }
}


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

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

从 componentDidmount 中移除 async 并在 getAllCases 方法中使用 async 和 await

export const getAllCases = async () => {
    return (dispatch) => {
        await axios.get('https://corona.lmao.ninja/all')
        .then(res => {
            const cases = res.data
            dispatch(getCasesSuccess(cases))
        })
        .catch(error => {
            throw(error)
        })
    }
}

【讨论】：

【解决方案2】：

正如错误消息所说，Redux 操作必须是普通对象。由于您使用的是thunk 中间件，您可以调度functions。但是您返回的是promise。由于数据加载是异步的，因此您的组件应检查数据是否存在，如果不存在，则呈现加载指示器或其他内容。在您的 reducer 中，您可以将 allCases 的默认状态设置为 null，DataContainer 组件将在组件挂载时使用该状态。

export const getCasesSuccess = (data) => {
    return {
        type: GET_ALL_CASES,
        data
    }
};

import React from "react";
import { connect } from "react-redux";
import { getAllCases } from "../../store/actions/index";
import AllCases from '../../components/allcases/allCases';

class DataContainer extends React.Component {
    componentDidMount() {        
        this.props.getAllCases() 
    }


    render() {
        const { allCases } = this.props
        if (!allCases) {
          return <div>Loading...</div>
        }
    
        return ( 
            <div>
                <AllCases allCases={this.props.allCases} />
            </div>
         );
    }
}

const mapStateToProps = (state) => ({
  allCases: state.allCases
})

const mapDispatchToProps = {
  getAllCases,
}


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

【讨论】：