快速连续发送相同的 redux 动作

Question

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

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

在成功更新的 saga 中，操作的控制在两种情况下都有，但 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中的接收动作。 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

您是否正在为您的 saga 函数 requestLikePost 使用 takeLatest() 效果？它只会考虑最新的操作调用，如果它快速连续发生，则会中止所有之前的调用。

Use takeEvery() saga effect instead.

快速连续发送相同的 redux 动作

Same redux actions dispatched in quick succession

reactjs

redux

redux-saga

react-redux