如何使用 react-redux 将错误 500 全局重定向到页面

Posted

技术标签:

【中文标题】如何使用 react-redux 将错误 500 全局重定向到页面【英文标题】:How to globally redirect error 500 to a page using react-redux 【发布时间】:2016-10-13 12:49:46 【问题描述】:

我正在使用这个反应 redux starter,我想知道如何将所有 api 500 错误重定向到一个页面?

【问题讨论】:

你能捕捉到前端的错误吗?如果可以,请使用您想要直接访问的页面推送到历史记录。你可以在 react-router 的文档中查看实现细节。 【参考方案1】:

redux-starter 默认安装了react-router-reduxredux-thunk

我不确定 API 调用是在哪里进行的,因为您没有提供任何代码,但如果您可以将商店注入您的 API 包装器,也许您可​​以通过您的 redux 商店调度路由器操作。

假设您正在使用某种 API 包装器和 thunk,您可以执行以下操作:

import  push  from 'react-router-redux';

function myThunkFunction() 
  return dispatch => axios.get(...).catch((error) => 
    /** insert logic to determine 500 error **/
    if (500error) 
      dispatch(push('http://example.com/error/500'));
    
  );

【讨论】:

以上是关于如何使用 react-redux 将错误 500 全局重定向到页面的主要内容,如果未能解决你的问题,请参考以下文章

如何解决 react-redux 中的此错误“错误:操作必须是普通对象。使用自定义中间件进行异步操作。”

使用 react-redux 连接功能时渲染组件上的打字稿错误

如何使用 react-redux 钩子测试组件?

如何使用 react-redux 解决“无法解析模块”问题?

如何使用react-redux将redux商店中封装的ui状态映射到道具?

将 react-redux useSelector 与打字稿一起使用