Реакция приёмника-переадресации на 4-й странице при изменении страницы

Question

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

Мой сценарий использования: у меня сохранено состояние страницы в избыточном хранилище. Состояние представлено как {loading, finished}. Когда пользователь нажимает кнопку, на сервер отправляется запрос, и loading становится true. Когда ответ возвращается положительный, loading становится false, а finished становится true. Когда пользователь уходит со страницы, я хочу, чтобы состояние было сброшено до его начальных значений (loading = false, finished = false).

Следующий ответ великолепен, но больше не работает на v4, потому что onEnter onChange и onLeave были удалены.

React Router + Redux - отправлять асинхронное действие при изменении маршрута?

Редактировать: лучшее решение будет что-то масштабируемое. В будущем таких страниц будет несколько, и состояние для каждой из них должно быть сброшено на странице nagivation

Спасибо!

Answer 1

v4 имеет объект location, который можно использовать для проверки того, не переместилось ли приложение с текущей страницы.

https://reacttraining.com/react-router/web/api/location

Answer 2

Вы можете создать свой экземпляр history отдельно, прослушивать его и отправлять действие, когда что-то меняется.

Пример

// history.js
import createHistory from 'history/createBrowserHistory';

const history = createHistory();

history.listen(location => {
  // Dispatch action depending on location...
});

export default history;

// App.js
import { Router, Route } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import history from './history';

class App extends React.Component {
  render() {
    return (
      <Router history={history}>
        <div>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </div>
      </Router>
    )
  }
}