React-Redux应用：如何在Action内实现路由跳转与通用错误处理？

嘿，这个问题我刚好有经验，来给你捋捋～

首先明确：不需要依赖react-router-redux，只用react-router-dom就能搞定，同时还能结合需求实现通用错误处理，下面给你两种实用方案：

方案一：直接将history传入Action（简单易上手） #

因为你已经用withRouter给组件注入了history props，所以可以在调用Action时直接把history传进去，在Action里完成错误后的重定向逻辑。

改造你的Action代码 #

export function loginDetails(details, history) {
  return function (dispatch, getState) {
    // 模拟API请求逻辑
    api.login(details)
      .then(response => {
        dispatch({ type: 'LOGIN_SUCCESS', payload: response });
      })
      .catch(error => {
        // 1. 触发错误Action，存入错误状态（供全局组件显示提示）
        dispatch({ type: 'LOGIN_FAILURE', payload: error });
        // 2. 错误时执行重定向，比如跳转到错误页或登录页
        history.push('/error-page');
      });
  };
}

组件中调用Action #

// 组件内（已通过withRouter获取history）
this.props.loginDetails(this.state.loginFormData, this.props.history);

方案二：用Redux中间件实现通用错误+重定向（更优雅） #

如果想让所有服务器返回的错误都自动触发重定向，不用在每个Action里重复写逻辑，推荐写一个自定义Redux中间件，统一监听错误Action并处理。

步骤1：创建重定向中间件 #

import { createBrowserHistory } from 'history';

// 先创建history实例
export const history = createBrowserHistory();

const errorRedirectMiddleware = store => next => action => {
  const result = next(action);

  // 监听所有带_FAILURE后缀的错误Action
  if (action.type.endsWith('_FAILURE')) {
    // 通用错误提示（比如弹出Toast）
    console.error('请求出错：', action.payload.message);
    // 根据错误类型动态决定重定向路径
    const redirectPath = action.payload.status === 401 ? '/login' : '/error-page';
    history.push(redirectPath);
  }

  return result;
};

步骤2：在创建Store时注入中间件 #

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import { errorRedirectMiddleware } from './middleware';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk, errorRedirectMiddleware)
);

步骤3：Action中只需专注业务逻辑 #

export function loginDetails(details) {
  return function (dispatch, getState) {
    api.login(details)
      .then(response => {
        dispatch({ type: 'LOGIN_SUCCESS', payload: response });
      })
      .catch(error => {
        // 只需dispatch错误Action，中间件会自动处理重定向
        dispatch({ type: 'LOGIN_FAILURE', payload: error });
      });
  };
}

这个库现在已经处于维护状态，官方更推荐直接用react-router-dom结合Redux的原生方式实现需求，所以完全没必要额外引入它。

内容的提问来源于stack exchange，提问作者user8125765