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

Question

我尝试获取数据并将其显示到 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);

Answer 1

如果您查看中间件解析的 promise 函数，您会注意到您正在再次调度相同类型的操作 (DATA_LOADED)，这会导致中间件再次处理它。

看看这个方法

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

您应该将 REQUEST、SUCCESS 和 ERROR 调用分开，这样当您调用每个操作时就不会陷入无限循环。

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

Infinite loop when fetch data in middleware

reactjs

redux

redux-thunk

react-redux