Reactjs 中间件中获取数据时的无限循环

我试图获取数据并将其显示到react组件中，但在我的中间件中，在获取调用上有一个无限循环，操作似乎没有被调度。我的post组件没有收到任何结果

Action.js：

import { DATA_LOADED } from './../constants/action-types';

export function getData() {
    return {type: DATA_LOADED}
}

中间件：

export function asyncMiddleWare({dispatch}) {
    return function(next) {
        return function (action) {
            if (action.type === DATA_LOADED) {
                return fetch('https://jsonplaceholder.typicode.com/posts')
                .then(response => response.json())
                .then(json => {
                    console.log('---');
                    console.log('infinite calls');
                    console.log('---');
                    dispatch({type:DATA_LOADED, payload: json});
                })
            }
            return next(action);
        }
    }
}

减速器：

    if (action.type === DATA_LOADED) {
        return Object.assign({}, state, {
            articles: state.remoteArticles.concat(action.payload)
        })
    }

商店呢

import {createStore, applyMiddleware, compose} from 'redux';
import rootReducer from '../reducers/index';
import {asyncMiddleWare } from "../middleware";
import thunk from "redux-thunk";

const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, storeEnhancers(applyMiddleware(asyncMiddleWare, thunk)));

export default store;

我在组件中的componentDidMount方法中加载数据：

import React from "react";
import { connect } from "react-redux";
import { getData } from "./js/actions/index";

class Post extends React.Component {

    componentDidMount() {
        this.props.getData();
    }

    render () {
        console.log(this.props.articles);
      return (
      <div className='post'>
          {this.props.articles.map(article => (
              <div className='post'>
                  {article}
              </div>
      ))}
      </div>
      )
    }
  }



  const mapStateToProps = (state) => {
    return {
      articles: state.remoteArticles.slice(0, 10)
    };
  }
export default connect(
    mapStateToProps,
    {getData}
)(Post);

从“React”导入React；
从“react redux”导入{connect}；
从“/js/actions/index”导入{getData}；
类Post扩展了React.Component{
componentDidMount（）{
this.props.getData（）；
}
渲染（）{
console.log（this.props.articles）；
返回(
{this.props.articles.map（article=>(
{第条}
))}
)
}
}
常量mapStateToProps=（状态）=>{
返回{
项目：state.remoteArticles.slice（0,10）
};
}
导出默认连接(
MapStateTops，
{getData}
)（员额）；

如果查看中间件解析的promise函数，您会注意到您正在再次分派相同类型的操作（

加载的数据），这会导致中间件再次处理它

看看这个方法

export function asyncMiddleWare({dispatch}) {
    return function(next) {
        return function (action) {
            if (action.type === DATA_LOAD_REQUEST) {
                return fetch('https://jsonplaceholder.typicode.com/posts')
                .then(response => response.json())
                .then(json => {
                    console.log('---');
                    console.log('infinite calls');
                    console.log('---');
                    dispatch({type:DATA_LOAD_SUCCESS, payload: json});
                }, (error) => {
                    dispatch({type:DATA_LOAD_ERROR, payload: error});
                })
            }
            return next(action);
        }
    }
}

您应该将请求、成功和错误调用分开，这样当您调用这些操作时，您就不会在无限循环中结束。
您在这里调度的是相同的类型：dispatch（{type:DATA_LOADED，payload:json}）及其引起的无限循环。