Как протолкнуть маршрут в историю с помощью redux-saga

Я использую react, redux, saga и router v4.

Я хочу сделать перенаправление внутри своей саги, но не знаю, как получить доступ к объекту history, поскольку я использую BrowserRouter.

То, что я хочу сделать, будет выглядеть примерно так:

export function * callWS (action) {
   const result = yield call(data, ws)

   if (result.status === 201) {
          yield call(history.push, '/success')
   }
}

Но поскольку я использую BrowserRouter, я никогда не создавал этот объект history. Есть мысли о том, как это сделать?

Если вы используете react-router-redux в своем приложении, вы можете импортировать действие putreplace из этого пакета.

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

Ответы 1

Я столкнулся с подобной проблемой, и я придумал это решение ..

в вашем app.js создайте историю и экспортируйте ее:

import createHistory from 'history/createBrowserHistory';
const history = createHistory();
// ...
export { history };

Затем в своих сагах вы можете создать функцию forwardTo, которая обрабатывает навигацию:

import { call, fork, takeLatest, cancel, take } from 'redux-saga/effects';
import { history } from 'app';

function* myFunction() {
  try {
    // do something
    yield call(forwardTo, '/');
  } catch(e){
    // Do something
  }
}

export default function* defaultSaga() {
  const submitWatcher = yield fork(takeLatest, SOMETHING, submitForm);
   yield take(LOCATION_CHANGE);
   yield cancel(submitWatcher);
 }

function forwardTo(location) {
 history.push(location);
}

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