Redux-saga调度返回这么多请求

Question

我使用Axios构建我的服务，我的化简器和操作是基于Duck模式构建的，但是一切都正常，但是我的dispatch()中的componentDidMount()向我的API发送了很多请求。

我已经尝试过将yield cancel（）传奇中间件与take（）结合使用，但没有任何效果：/

ducks / table.js

export const Types = {
  GET_ALL: 'booking/GET_ALL'
};

const initialState = {
  all: null
};

export default function reducer(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case Types.GET_ALL:
      return { 
        ...state,
        all: payload
      };
    default:
      return state;
  }

}

export const fetchAll = data => ({ type: Types.GET_ALL, payload: data });

services / table.js

import Http from "../utils/http";

export const getAll = async () => {
  try {
    const response = await Http.get('/todos/1');

    if (response.data) {
      return response.data;
    }

    throw response.data;
  } catch (error) {
    throw error;
  }
};

sagas / table.js

import { put, call } from 'redux-saga/effects';

import { getAll } from '../services/table'
import { fetchAll } from '../ducks/table';

export function* tableCheck(action) {
    try {       

        let data = yield call(getAll);
        yield put(fetchAll(data));

        console.log("tableCheck => try => action", action)      

    } catch (error) {

        //ToDo criar authError
        yield put(error)
    }
}

store / index.js

import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";

import reducers from "./reducers";
import rootSaga from "./sagas";

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducers, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

export default store;

store / sagas.js

import { takeLatest } from 'redux-saga/effects';

import { tableCheck } from '../sagas/table';

import { Types as bookingTypes } from '../ducks/table';

export default function* rootSaga() {
    yield takeLatest(bookingTypes.GET_ALL, tableCheck)
}

store / reducer.js

import { combineReducers } from "redux";

import bookings from "../ducks/table";

const appReducer = combineReducers({
  bookings
});
const rootReducer = (state, action) => {
  return appReducer(state, action);
};

export default rootReducer;

components / app.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Table from "./common/table";
import { fetchAll } from './ducks/table';

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      headers: ["#", "Name", "Check In", "Date", "Status"]
    };

    this.handleClick = this.handleClick.bind(this);    
  }

  async componentDidMount() {    
    //console.log("app => componentDidMount() => fetchAll()", await fetchAll())
    console.log("app => componentDidMount() => this.state", await this.state);
    console.log("app => componentDidMount() => this.props", await this.props);
    await this.props.dispatch(fetchAll());

    //<Table headings={this.state.headers} />

  }



  handleClick(e) {
    e.preventDefault();
    console.log("class App => handleClick() => this.props", this.props);
    console.log("class App => handleClick() => this.state", this.state);

  }

  render() {
    return (
      <div>
        <p className="header">React Table Component</p>

        <p>
          Made with ❤️ by <b>Gabriel Correa</b>
        </p>
        <button onClick={this.handleClick}>Testar</button>
      </div>
    );
  }
}

const mapStateToProps = state => ({ payload: state });

export default connect(mapStateToProps)(App);

感谢xD的帮助

Answer 1

yield put(fetchAll(data));

您正在传奇fetchAll中分派tableCheck。它将在无限循环中触发根传奇中的takeLatest：

yield takeLatest(bookingTypes.GET_ALL, tableCheck)

这可能是为什么您看到这么多请求的原因。

---

解决方案

如评论中所述：

我处理此问题的方法是将fetchAll拆分为至少fetchAllRequest和fetchAllSuccess（GET_ALL_REQUEST和GET_ALL_SUCCESS）。 app.js和takeLatest改为使用fetchAllRequest / GET_ALL_REQUEST。 put和reducer使用fetchAllSuccess / GET_ALL_SUCCESS代替。