Redux-saga dispatch 返回这么多请求

Question

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

我已经用 take() 尝试过使用 yield cancel() 传奇中间件，但没有任何效果：/

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

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

yield takeLatest(bookingTypes.GET_ALL, tableCheck)

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

---

解决方案

如 cmets 中所述：

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