《Redux-Saga》会因为一个动作而运行两次

Question

我有一个saga来处理类似的请求。用户点击按钮切换照片的赞状态。

saga监听类型为SUBMIT_LIKE的动作。我的问题是，submitLikeSaga运行两次，每个SUBMIT_LIKE行动。例如，在api错误的情况下，一个SUBMIT_LIKE动作触发两个api调用和四个RECEIVE_LIKE动作。

(如果有帮助，可以使用react-boilerplate)

export function* submitLikeSaga(action) {
  // optimistically update the UI
  // action shape: {
  //    type: RECEIVE_LIKE,
  //    like: {id: 1, liked: true}
  //  }
  yield put(receiveLike(action.like));
  // POST like data to api
  const response = yield call(
    request,
    `${API_ENDPOINT}/user_likes.json`,
    {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${action.token}`,
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(action.like),
    }
  );
  // if api call failed, reverse change made to UI
  if (response.err) {
    yield put(receiveLike({
      id: action.like.id,
      liked: !action.like.liked,
    }));
  }
}
export function* watchSubmitLike() {
  yield* takeEvery(SUBMIT_LIKE, submitLikeSaga);
}
// All sagas to be loaded
export default [
  watchFetchUsers,
  watchSubmitLike,
];

编辑:添加中间件和视图代码。 <标题> ProfileGrid.js h1> ActionIcon.js h1> store.js h1> asyncInjectors.js h1> div class="one_answers">

根据文档:https://redux-saga.js.org/docs/api/index.html#takelatestpattern-saga-args这将接收您最近的呼叫，并且只会触发一个操作

import { fork, takeLatest } from 'redux-saga/effects';
export function* watchSubmitLike() {
  yield fork(takeLatest, SUBMIT_LIKE, submitLikeSaga);
}

Answer 1

你的应用程序将运行良好，如果你做以下

yield* takeEvery(SUBMIT_LIKE, submitLikeSaga);应该是

yield takeEvery(SUBMIT_LIKE, submitLikeSaga);

你应该使用yield*仅当你排序传奇

Answer 2

我最近就遇到过这种情况。在我的例子中，这个传奇被创造了两次。我们withSaga HOC(一般在容器中)