Перенаправить на созданный пост после Create Post Saga

У меня есть блог, в котором вы можете создать сообщение, которое отлично работает. Что я хочу сделать, так это перенаправить на вновь созданный пост после создания.

postActions.js:

export function* watchCreatePost() {
  yield takeEvery(CREATE_POST, createPostSaga);
}

function* createPostSaga(action) {
  const token = yield select(selectToken);
  const headerParams = {
    Authorization: `JWT ${token}`
  };
  const apiCall = () => {
    let formData = new FormData();
    formData.append("title", action.payload.title);
    formData.append("content", action.payload.content);
    formData.append("thumbnail", action.payload.thumbnail);
    formData.append("tags", action.payload.tags);
    formData.append("slug", generateSlug(action.payload.title));
    return axios({
      method: "post",
      url: "/posts/",
      data: formData,
      headers: headerParams
    })
      .then(response => response.data)
      .catch(err => {
        throw err;
      });
  };

  try {
    const response = yield call(apiCall);
    const post = {};
    post[response.id] = { ...response };
    yield put({ type: ADD_POST, payload: response });
  } catch (error) {
    console.info(error);
  }
}

Как я уже сказал, это создает штраф для публикации, но я не уверен, как перенаправить после ее завершения. Я знаю, что в redux-thunk вы можете использовать .then(), но не вариант, насколько я могу судить с redux-saga.

Находится ли вновь созданный пост по другому URL-адресу? Если да, то this.props.history.push(URL_OF_BLOG_POST). Или, если новое сообщение в блоге находится на той же странице, но вы просто хотите прокрутить страницу до него, тогда ReactDom.findDOMNode(DOM_NODE).scrollIntoView().

Shawn Andrews 15.11.2018 19:13

Я мог бы использовать this.props.history.push(URL_OF_BLOG_POST), если бы знал URL поста, но не знаю, пока сага не закончится.

CHBresser 15.11.2018 19:23

После yield put({ type: ADD_POST, payload: response }) добавить yield call(redirectToBlogPost)?

Shawn Andrews 15.11.2018 20:06

Это сработало бы ... если бы я знал, как работать с redirectToBlogPost. props.history недоступен в саге, и у меня нет возможности узнать URL-адрес до завершения саги, поэтому я не могу выполнить перенаправление из компонента, потому что я не знаю URL-адрес, и я не могу перенаправить из саги, потому что у него нет метода перенаправления.

CHBresser 15.11.2018 21:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
162
1

Ответы 1

Ваше действие ADD_POST, вероятно, будет управляться редуктором, который обновляет своего рода массив posts до состояния, которое, как я полагаю?

Если так - добавить компонент phantom с функцией render, которая возвращает null - добавить массив state.posts в его свойства состояния - как только state.posts обновлен, вы можете перенаправить пользователя, потому что, поскольку это компонент, у вас есть доступ к истории

Если вы используете React-router или аналогичную библиотеку, вы можете импортировать функцию navigate и перенаправить пользователя внутрь саги.

Дай мне знать

Другие вопросы по теме