react redux 中与中间件功能相关的问题可能是什么

Question

在我的中间件函数中找不到问题。它一直在递归调度。请帮忙。

//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")
);

在我的中间件函数中找不到问题。它一直在递归调度。请帮忙。只需将一些文本添加到 post 我的问题更快。我希望你会明白。抱歉搞砸了。提前致谢。

Answer 1

你的中间件是总是运行fetch()，对于每个调度的动作。您应该添加一个条件，以便它仅在看到特定操作时运行 fetch()。此外，您的中间件不会将其他操作向下传递到中间件管道，因此任何操作都不会到达减速器。

这是一个固定的实现：

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

react redux 中与中间件功能相关的问题可能是什么

What could be the problem related to the middleware function in react redux

middleware

store

reactjs

redux