基于Flux的React中，如何正确实现动作完成后页面重定向（react-router+hashHistory）

我完全懂你的困扰——在Redux的dispatch流程里直接调用history.push()确实会踩坑，本质是因为这会间接触发新的状态更新（比如路由变化关联的状态变更），和当前正在执行的dispatch冲突。用回调函数虽然能实现功能，但确实会让action变得冗余，还把路由逻辑和业务逻辑硬耦合在一起，不够优雅。下面给你几个更合理的解决方案：

方案一：用自定义Redux中间件统一处理路由逻辑 #

这是最推荐的方式，把路由跳转这类副作用从action里抽离出来，交给中间件单独处理。你可以自定义一个中间件，监听特定的action类型（比如ROUTER_PUSH），然后在中间件里安全调用history.push()：

// 自定义路由中间件
const routerMiddleware = (history) => (store) => (next) => (action) => {
  if (action.type === 'ROUTER_PUSH') {
    history.push(action.payload.path);
  }
  return next(action);
};

// 配置store时传入history实例
const store = createStore(
  rootReducer,
  applyMiddleware(routerMiddleware(history))
);

之后在业务action里，只需要dispatch这个路由action即可，比如处理401清除会话的场景：

// 处理401的action
export const handleUnauthorized = () => (dispatch) => {
  // 清除会话状态
  dispatch({ type: 'CLEAR_SESSION' });
  // 发起路由跳转
  dispatch({ type: 'ROUTER_PUSH', payload: { path: '/login' } });
};

这种方式把路由逻辑和业务逻辑彻底解耦，action只负责描述“要做什么”，中间件负责执行副作用，完全符合Redux的设计理念。

方案二：Redux Toolkit用户专属——用extraArgument传入history #

如果你在用Redux Toolkit，可以把history作为extraArgument传入createAsyncThunk，这样在异步action里就能直接访问history，同时避免嵌套dispatch的问题：

// 配置store时传入history作为extraArgument
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: { history },
      },
    }),
});

// 定义异步action
export const fetchData = createAsyncThunk(
  'data/fetch',
  async (params, { dispatch, extra }) => {
    try {
      const response = await api.fetchData(params);
      return response.data;
    } catch (error) {
      if (error.response.status === 401) {
        dispatch({ type: 'CLEAR_SESSION' });
        extra.history.push('/login');
      }
      throw error;
    }
  }
);

Redux Toolkit的thunk中间件已经帮你处理了异步流程，这种方式既保持了action的简洁，又能安全地使用history跳转。

方案三：将路由状态同步到Redux（适合需要全局共享路由的场景） #

如果你的业务需要把路由状态存在Redux里（比如全局获取当前路由路径），可以用connected-react-router这类库，它能让路由状态成为Redux store的一部分，这时你可以直接dispatch路由相关的action来跳转，完全不需要直接调用history.push()：

// 导入connected-react-router的action
import { push } from 'connected-react-router';

// 在action里使用
export const handleUnauthorized = () => (dispatch) => {
  dispatch({ type: 'CLEAR_SESSION' });
  dispatch(push('/login'));
};

这种方式的好处是路由变化会触发Redux状态更新，便于追踪和调试，但需要额外配置路由与Redux的连接，适合路由状态需要全局共享的场景。

总结一下，最推荐方案一或方案二，它们都能优雅解决dispatch中无法直接使用history的问题，同时解耦副作用和业务逻辑，让代码更易维护。

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