Asyn c Action Redux Необработанный отказ (ошибка): Действия должны быть простыми объектами. Использовать пользовательское промежуточное ПО для действий asyn c

Question

У меня есть реактивный проект, который использует redux-thunk. Я создал действие, которое поразит конечную точку, а затем установит хранилище для полученных данных. В настоящее время я использую .then, но когда я вызываю действие в componentdidmount, данных там нет. Компонент рендерится до того, как данные станут доступны. Чтобы это исправить, я решил превратить свое действие в асинхронное действие c, а затем ждать в моем компоненте didmount. Проблема в том, что как только я добавляю asyn c в свое действие, я получаю эту ошибку ....

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

Удалите asyn c из componentDidmount и используйте asyn c и ожидайте в методе 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)
        })
    }
}

Answer 2

Как говорится в сообщениях об ошибках, действия 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);