Question

我正在使用使用redux-saga的React应用程序。

我对此有点困惑所以我正在寻求一些帮助/指导。

我正在尝试实现一个全局错误处理程序，目标是每次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确实更新了网址，但没有重定向到网页。我看了this answer，但无法让它发挥作用。由于它正在使用react-router-dom v4，我会遵循建议的here

使用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>
);

知道我做错了什么吗？关于如何更好地实施这个的任何建议？

全局错误处理程序react / redux saga和重定向外部组件

0 个答案: