reactjs - 快速连续调度相同的 redux 操作

Question

我有一个带有类似按钮的应用程序。用户可以快速连续喜欢多个帖子。我发送操作以更新喜欢计数并通过 redux 操作添加喜欢/用户记录。

export const likePost = (payload) => (dispatch) => {
  dispatch({
    type: "LIKE_POST",
    payload,
  });
};

在成功更新的传奇中， Action 控制在两种情况下都出现，但 LIKE_POST_SUCCESSFUL 仅在最后一次触发。

function* requestLikePost(action) {
  const { postId } = action.payload;
  try {
    const response = yield call(callLikePostsApi, postId);
    yield put({
      type: "LIKE_POST_SUCCESSFUL",
      payload: response.data,
    });
  } catch (error) {
    yield put({
      type: "LIKE_POST_FAILED",
      payload: error.response.data,
    });
  }
}

这些是在 reducer 中接收 Action 。 LIKE_POST 按预期触发两次，但 LIKE_POST_SUCCESSFUL 没有触发，它仅在最后一次触发，尽管两者都达到了。

case "LIKE_POST":
      return {
        ...state,
        errors: {},
       
      };
    case "LIKE_POST_SUCCESSFUL":
      updatedPosts = state.posts.map((post) => {
        if (post.postId === action.payload.postId) {
          return action.payload;
        }
        return post;
      });
      updatedLikes = [
        ...state.likes,
        { userName: state.profile.userName, postId: action.payload.postId },
      ];
      console.log("updatedLikes", updatedLikes, action.payload);
      return {
        ...state,
        posts: updatedPosts,
        likes: updatedLikes,
        loading: false,
      };

API调用

const callLikePostsApi = (postId) => axios.get(`/post/${postId}/like`);

Answer 1

您在使用 takeLatest()对您的传奇功能的影响 requestLikePost ?它将只考虑最新的 Action 调用，如果它快速连续发生，则中止所有先前的调用。

Use takeEvery() saga effect instead.