Одни и те же действия redux отправляются в быстрой последовательности - PullRequest
Новая
       18

Одни и те же действия redux отправляются в быстрой последовательности

2 голосов
/ 11 июля 2020

У меня есть приложение с кнопкой лайка. Пользователь может лайкать несколько сообщений подряд. Я отправляю действие для обновления likecount и добавляю запись like / user через действие redux. 

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,
    });
  }
}

Это действие приема в редукторе. 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`);

1 Ответ

2 голосов
/ 11 июля 2020

Используете ли вы эффект takeLatest() для функции requestLikePost саги? Он будет принимать во внимание только последний вызов действия и прерывает все предыдущие вызовы, если это происходит в быстрой последовательности.

Вместо этого используйте эффект takeEvery() саги.

...