React Router+Redux Loop：Reducer不可触发Action及页面回退实现问询

嘿，我来帮你搞定这个Redux Action执行成功后导航回首页的需求，结合你用到的React Router、react-router-redux和Redux Loop，咱们一步步来实现：

1. 先确认路由中间件配置 #

首先得确保你的Redux Store已经集成了react-router-redux提供的routerMiddleware，这样才能在Redux里直接派发路由跳转的action。如果还没配置，记得在创建store的时候加上：

import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import { browserHistory } from 'react-router';
import rootReducer from './reducers';

const middleware = routerMiddleware(browserHistory);
const store = createStore(rootReducer, applyMiddleware(middleware));

2. 在Redux Loop中处理异步成功后的导航 #

因为你用了Redux Loop，咱们可以在用户信息更新成功的reducer分支里，把路由跳转作为副作用来触发，完美契合Loop的副作用管理逻辑。

假设你的updateUser是一个异步action，咱们用loop和Cmd来处理：

import { loop, Cmd } from 'redux-loop';
import { push } from 'react-router-redux'; // 或者用goBack返回上一页
import { UPDATE_USER_REQUEST, UPDATE_USER_SUCCESS, UPDATE_USER_FAILURE } from './actionTypes';

const initialState = {
  loading: false,
  currentUser: null,
  error: null
};

export default function userReducer(state = initialState, action) {
  switch (action.type) {
    case UPDATE_USER_REQUEST:
      // 发起更新请求，设置加载状态
      return loop(
        { ...state, loading: true, error: null },
        Cmd.run(yourApi.updateUser, { // 替换成你的实际API调用
          args: [action.payload.id, action.payload.user],
          successActionCreator: (updatedUser) => ({
            type: UPDATE_USER_SUCCESS,
            payload: updatedUser
          }),
          failActionCreator: (err) => ({
            type: UPDATE_USER_FAILURE,
            payload: err.message
          })
        })
      );
    
    case UPDATE_USER_SUCCESS:
      // 更新状态，同时触发跳转到首页的副作用
      return loop(
        { ...state, loading: false, currentUser: action.payload },
        Cmd.action(push('/home')) // 这里用push直接跳首页，或者用goBack()返回上一页
      );
    
    case UPDATE_USER_FAILURE:
      // 处理更新失败的情况
      return { ...state, loading: false, error: action.payload };
    
    default:
      return state;
  }
}

3. 简化视图层的dispatch调用 #

之前你把history传给了action，现在完全不需要了，路由逻辑已经交给Redux处理，视图层只需要专注于触发更新action：

saveProfile = () => {
  const { name /* 其他需要更新的字段 */ } = this.state;
  const { id } = this.props.match.params; // 从路由参数获取用户ID
  this.props.dispatch({
    type: UPDATE_USER_REQUEST,
    payload: { id, user: { name } }
  });
  // 或者如果你有封装好的action creator：
  // this.props.dispatch(updateUser(id, { name }));
};

可选：用goBack()替代固定跳转 #

如果你的需求是返回上一页（刚好这里上一页就是/home），而不是固定跳转到/home，可以把push('/home')换成goBack()：

import { goBack } from 'react-router-redux';

// 在UPDATE_USER_SUCCESS的case里
return loop(
  { ...state, loading: false, currentUser: action.payload },
  Cmd.action(goBack())
);

这样做的好处是，路由跳转逻辑和业务逻辑完全解耦，所有副作用都通过Redux Loop统一管理，符合Redux的单一数据流原则，代码也更易维护。

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