Question

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

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

Answer 1

如错误消息所述，Redux操作必须是普通对象。由于您使用的是thunk中间件，因此可以调度function。但是您返回的是promise。由于数据加载是异步的，因此您的组件应检查数据是否存在，如果不存在，请呈现加载指示符或其他内容。在化简器中，可以将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);

Answer 2

从componentDidmount中删除异步，并在getAllCases方法中使用异步并等待

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

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

2 个答案: