Глобальный обработчик ошибок реагирует / сокращает сагу и перенаправляет внешние компоненты - PullRequest
Новая
       8

Глобальный обработчик ошибок реагирует / сокращает сагу и перенаправляет внешние компоненты

0 голосов
/ 06 июня 2018

Я работаю над приложением React, которое использует redux-saga.

Я немного застрял в этом, поэтому я обращаюсь за некоторой помощью / руководством.

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

Я думал, что хороший способ сделать это - использовать axios interceptors

Это мой перехватчик (уменьшен до минимума): 

import axios from 'axios';
import history from '../components/history'; // this is trouble

export default {
  configureAxios: (store) => {
    // Add a response interceptor
    axios.interceptors.response.use((response) => {
      // will work on this later
      return response;
      }, (error) => {
      // catches if the session ended!
      return Promise.reject(error);
    });
    axios.interceptors.response.use(undefined, (error) => {
      // still very much work in progress
      if (error.response.status >= 500) {
        // maybe fire off an action to update the store
        history.push('/500');
      }
      return Promise.reject(error);
    });
   }
 };

Это хороший подход?

Если это так, у меня есть проблема, где history.push действительно обновляет URL, но не перенаправляет на страницу.Я посмотрел на этот ответ , но не смог заставить его работать.Так как он использует react-router-dom v4, я должен следовать тому, что предлагается здесь

Установленная история с npm i history --save Я создал history.js

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

, а затемв root.js

import history from './history';
//some stuff here
const App = ({ matchedRoutes }) =>
<div>
  <Head />
  <Header />
  <Switch>
    {matchedRoutes.map((route, i) =>
      <RouteWithSubRoutes key={i} {...route} />
    )}
  </Switch>
  <Main />
</div>;

const Root = ({ store }) => (
  <Provider store={store}>
    <Router history={history}>
      <App matchedRoutes={routes} />
    </Router>
  </Provider>
);

Есть идеи, что я делаю не так?Любое предложение о том, как лучше реализовать это?

...