В чем может быть проблема, связанная с функцией промежуточного программного обеспечения в реагировать на избыточность - PullRequest
Новая
       39

В чем может быть проблема, связанная с функцией промежуточного программного обеспечения в реагировать на избыточность

0 голосов
/ 19 декабря 2018

Не могу найти проблему в моей функции промежуточного программного обеспечения.Это было отправлено рекурсивно.Пожалуйста помоги.

//App.js
import React, { PureComponent } from "react";
import { connect } from "react-redux";

class App extends PureComponent {
  render() {
    return <div>
        { (this.props.isLoading) ? <p>Loading...</p> : <p></p>}
        <button onClick={ this.props.send }>
        Hello {this.props.reducer}
        </button>
        </div>;
  }
}

export default connect(
    state => {
        return {
            reducer: state.value,
            isLoading: state.isLoading
        }
     }, {
        send: () => ({type: "SEND_REQUEST"})
    }
)(App);

//////////////////////////////
//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";

const initialState = {
  isLoading: false,
  value: 1
};
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "SEND_REQUEST":
      return { ...state, isLoading: true };
    case "SUCCESS_REQUEST":
      return { ...state, isLoading: false, value: parseInt(state.value) + 1 };
      case "ERROR_REQUEST":
      return { ...state, isLoading: false, value: "ERROR" };
    default:
      return state;
  }
  return state;
};
const middler = store => next => action => {
    fetch('http://ZiptasticAPI.com/90001', { method: 'GET'})
      .then(response => response.json())
      .then(series => {
        console.log(series);
        store.dispatch({type: "SUCCESS_REQUEST"});
      })
      .catch(error => {
        store.dispatch({type: "ERROR_REQUEST"});
      });
};
const store = createStore(reducer, applyMiddleware(middler));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Не могу найти проблему в моей функции промежуточного программного обеспечения.Это было отправлено рекурсивно.Пожалуйста помоги.Просто добавьте текст, чтобы опубликовать мою проблему быстрее.Я надеюсь, вы поймете.Извините за беспорядок.Заранее спасибо.

1 Ответ

0 голосов
/ 19 декабря 2018

Ваше промежуточное ПО всегда работает fetch(), для каждое отправленное действие.Вы должны добавить условие, чтобы оно запускалось fetch() только при обнаружении определенных действий.Кроме того, ваше промежуточное ПО не передает другие действия по конвейеру промежуточного ПО, поэтому никакие действия никогда не достигнут редукторов.

Вот фиксированная реализация: 

const requestMiddleware = storeAPI => next => action => {
    if(action.type === "SEND_REQUEST") {
        fetch(someURL)
            .then(response => {
                // dispatch an action
            });
    }
    else {
        return next(action);
    }
}
...