在 useEffect 中使用 Dispatch 时获得无限 API 调用 (Redux Saga)

Question

我正在尝试从 API 获取数据并将其存储在使用 Redux Saga 的状态中。但是当 API 没有返回结果时，动作会被无限期地调度。我可以在网络选项卡中看到 API 调用，它显示 200 和实际响应。

API.js

export const fetchStatsAPI = (startDate, endDate, isMonthly = false) => (
  axios.get('apicall')
);

Action.js

export const fetchIssues = ({ startDate, endDate, isMonthly }) => ({
  type: types.FETCH_STATS,
  startDate,
  endDate,
  isMonthly,
});

Reducer.js

 export default function Reducer(state = initialState, action) {
  switch (action.type) {
    case types.FETCH_STATS:
      console.log("Action called");
      return {
        ...state,
        Stats: action.payload,
      };
    default:
      return state;
  }
}

Saga.js

function* handlePriorityIssuesSaga(params) {
  try {
    const response = yield call(Api.fetchStatsAPI, params.startDate, params.endDate, params.isMonthly);
    yield put(actions.fetchIssues(response.data));
  } catch (e) {
  }
}

索引。 js

export default function Issues({ startDate, endDate, isMonthly }) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(actions.fetchIssues({ startDate, endDate, isMonthly }));
  }, [startDate, endDate, isMonthly]);

  const { IssuesStats } = useSelector((state) => state.dashboard);

  return (
    <p>hello</p>
  );
}

Answer 1

您正在使用相同的操作创建者 actions.fetchIssues 来启动抓取和分派抓取结果。

在你的组件中：

dispatch(actions.fetchIssues({ startDate, endDate, isMonthly }));

在你的传奇中：

yield put(actions.fetchIssues(response.data));

在您的问题中未包含的某些代码中，有一个传奇观察者正在寻找 take 获取问题操作并将其传递给您的 handlePriorityIssuesSaga 函数。您在 handlePriorityIssuesSaga 中通过 put 调度的操作将触发相同的匹配条件，因此该函数会无限触发自身。

您需要两个单独的操作来启动提取和存储结果，与 this answer 中相同。

在 useEffect 中使用 Dispatch 时获得无限 API 调用 (Redux Saga)

Getting infinite API Call when using Dispatch in useEffect (Redux Saga)

reactjs

redux-saga