React redux Actions 必须是普通对象。使用自定义中间件进行异步操作

Question

我想在页面上显示组件列表，为此我使用了 react-redux。有很多不清楚的样板文件，我正在混合这些样板文件以实现某些功能。异步操作有问题抛出以下错误

Actions must be plain objects. Use custom middleware for async actions.

动作

export const fetchPublicDisplays = () => async dispatch => {
    console.log("object")
    const response = await api.get('/display/list');
    dispatch({ type: FETCH_PUBLIC_DISPLAYS, payload: response.data });
};

减速器

const displayReducer = (state = [], action) => {
    switch (action.type) {
        case FETCH_PUBLIC_DISPLAYS:
            return action.payload;
        default:
            return state
    }
}

组件


class PublicHome extends React.Component {

    componentDidMount() {
        this.props.fetchPublicDisplays()
    }

    renderDisplays() {
        console.log(this.props)
        if (this.props.displays) {

            return this.props.displays.map(display => {
                return (
                    <div className="item" key={display.id}>
                        display
                    </div>
                )
            })
        }
    }

    render() {
        return (
            <>
                {this.renderDisplays()}
            </>
        )
    }
}

const mapStateToProps = state => {
    return { displays: state.deisplays };
};

export default connect(
    mapStateToProps,
    { fetchPublicDisplays }
)(PublicHome);

Answer 1

connect 的第二个参数是一个函数 (mapDispatchToProps)，它将 dispatch 作为参数和 returns 一个对象。这是相同的官方文档 - https://react-redux.js.org/using-react-redux/connect-mapdispatch。在您的情况下，您给它一个对象，即 fetchPublicDisplays。第二个问题是您不能在 redux 操作中执行异步操作，您需要先执行异步操作，然后调用 redux 操作来更新存储状态。这是您修改后的代码，应该可以使用 -

 import React from "react";
 import { connect } from "react-redux";
 import api from "axios";

export const displayReducer = (state = [], action) => {   switch (action.type) {
    case "FETCH_PUBLIC_DISPLAYS":
      return action.payload;
    default:
      return state;   } };

export const fetchPublicDisplays = (data) => (dispatch) => {};

class PublicHome extends React.Component {   componentDidMount() {
    this.fetchPublicDisplaysAsync();   }

  fetchPublicDisplaysAsync = async () => {
    const response = await api.get("/display/list");
    this.props.fetchPublicDisplays(response.data);  };

  renderDisplays() {
    console.log(this.props);
    if (this.props.displays) {
      return this.props.displays.map((display) => {
        return (
          <div className="item" key={display.id}>
            display
          </div>
        );
      });
    }   }

  render() {
    return <>{this.renderDisplays()}</>;   } }

const mapStateToProps = (state) => {   return { displays: state.deisplays }; };

const mapDispatchToProps = (dispatch) => ({   fetchPublicDisplays: (data) => {
    dispatch({ type: "FETCH_PUBLIC_DISPLAYS", payload: data });   } });

export const App = connect(mapStateToProps, mapDispatchToProps)(PublicHome);

这是相同的代码沙盒 link - https://codesandbox.io/s/distracted-meadow-3qi32?file=/src/App.js:0-1243

React redux Actions 必须是普通对象。使用自定义中间件进行异步操作

React redux Actions must be plain objects. Use custom middleware for async actions

javascript

reactjs

redux