快速连续发送相同的 redux 操作答案

【问题标题】：Same redux actions dispatched in quick succession快速连续发送相同的 redux 操作
【发布时间】：2020-11-01 00:38:30
【问题描述】：

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

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

在成功更新的传奇中，动作控制在两种情况下都出现，但 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`);

【问题讨论】：

标签： reactjs redux react-redux redux-saga

【解决方案1】：

您是否为您的传奇函数requestLikePost 使用takeLatest() 效果？它将仅考虑最近的操作调用，如果它快速连续发生，它将中止所有先前的调用。

改用takeEvery() saga 效果。

【讨论】：

感谢我在 saga 中使用了 takeLatest。由于两个喜欢都触发了原始请求，所以我没有朝这个方向思考。它被正确地取消了。