如何将Redux-Thunk与Redux-Observable结合？现有代码迁移咨询

嘿，很高兴帮你梳理从Redux-Thunk迁移到Redux-Observable，或者两者结合的方案！我会分两种场景来讲解，你可以根据自己的需求选择。

方案1：同时使用Redux-Thunk和Redux-Observable #

如果你不想立刻完全替换Thunk，而是让两者共存，只需要在Store配置中同时添加两个中间件即可，注意Thunk要放在Redux-Observable前面——因为中间件是按顺序执行的，Thunk会先处理返回函数的异步Action，之后普通Action才会被Observable监听。

Store配置示例 #

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { createEpicMiddleware } from 'redux-observable';
import rootReducer from './reducers';
import rootEpic from './epics';

// 创建Observable中间件
const epicMiddleware = createEpicMiddleware();

// 同时应用Thunk和Observable中间件
const store = createStore(
  rootReducer,
  applyMiddleware(thunk, epicMiddleware)
);

// 运行根Epic
epicMiddleware.run(rootEpic);

export default store;

这种模式下，你可以保留现有的Thunk Action（比如你原来的initState），同时新增Observable来处理其他异步逻辑，两者互不干扰。

方案2：完全迁移到Redux-Observable #

如果想彻底用Redux-Observable替代Thunk，我们可以把你原来的initState逻辑用RxJS操作符重构，核心思路是用forkJoin替代Promise.all（两者行为一致：等待所有异步任务完成后返回结果）。

步骤1：定义Action Types #

先明确需要的Action类型，方便Epic监听和Reducer处理：

// actionTypes.js
export const INIT_STATE_REQUEST = 'INIT_STATE_REQUEST';
export const INIT_STATE_SUCCESS = 'INIT_STATE_SUCCESS';
export const INIT_STATE_FAILURE = 'INIT_STATE_FAILURE';
export const PROCESS_DATA1_SUCCESS = 'PROCESS_DATA1_SUCCESS';
export const PROCESS_DATA2_SUCCESS = 'PROCESS_DATA2_SUCCESS';

步骤2：编写Action Creators #

创建触发状态初始化的普通Action（不再是返回函数的Thunk）：

// actions.js
import * as types from './actionTypes';

export const initStateRequest = () => ({ type: types.INIT_STATE_REQUEST });
export const initStateSuccess = () => ({ type: types.INIT_STATE_SUCCESS });
export const initStateFailure = (error) => ({ 
  type: types.INIT_STATE_FAILURE, 
  payload: error 
});

// 数据处理完成后的Action（如果需要更新状态）
export const processData1Success = (data) => ({
  type: types.PROCESS_DATA1_SUCCESS,
  payload: data
});

export const processData2Success = (data) => ({
  type: types.PROCESS_DATA2_SUCCESS,
  payload: data
});

步骤3：编写对应的Epic #

这是核心部分，用RxJS实现原Thunk中的并行请求逻辑：

// epics.js
import { forkJoin, of } from 'rxjs';
import { map, catchError, switchMap } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax'; // 也可以用axios，需把Promise转成Observable
import * as types from './actionTypes';
import * as actions from './actions';

// 模拟原processData1的请求逻辑
const fetchData1 = () => ajax.get('/api/data1').pipe(map(res => res.data));
// 模拟原processData2的请求逻辑
const fetchData2 = () => ajax.get('/api/data2').pipe(map(res => res.data));

export const initStateEpic = (action$, state$) => action$.pipe(
  // 监听初始化请求的Action
  ofType(types.INIT_STATE_REQUEST),
  // 切换到新的Observable流处理异步逻辑
  switchMap(() => {
    // 并行发起两个请求，对应原Thunk中的Promise.all
    return forkJoin([fetchData1(), fetchData2()]).pipe(
      // 两个请求都成功后，分发数据处理完成的Action和初始化成功的Action
      map(([data1, data2]) => {
        // 如果需要分别处理两个数据，可以先分发对应的成功Action
        state$.dispatch(actions.processData1Success(data1));
        state$.dispatch(actions.processData2Success(data2));
        // 最后分发初始化完成的Action
        return actions.initStateSuccess();
      }),
      // 捕获任何请求失败的情况，分发错误Action
      catchError(error => of(actions.initStateFailure(error.message)))
    );
  })
);

步骤4：组件中调用 #

在componentDidMount里，只需要分发普通的初始化请求Action即可：

// 你的组件
componentDidMount() {
  this.props.dispatch(actions.initStateRequest());
  
  // 如果需要在初始化完成后执行逻辑，可以通过Redux状态监听：
  // 比如在Reducer中维护initStateSuccess的状态，通过connect映射到组件props，
  // 然后在componentDidUpdate中判断状态变化
}

补充：Reducer示例（可选） #

如果需要在状态中记录初始化的状态（加载中、成功、失败），可以编写对应的Reducer：

// reducers.js
import * as types from './actionTypes';

const initialState = {
  isInitLoading: false,
  isInitSuccess: false,
  initError: null,
  data1: null,
  data2: null
};

export default function rootReducer(state = initialState, action) {
  switch(action.type) {
    case types.INIT_STATE_REQUEST:
      return { ...state, isInitLoading: true, initError: null };
    case types.INIT_STATE_SUCCESS:
      return { ...state, isInitLoading: false, isInitSuccess: true };
    case types.INIT_STATE_FAILURE:
      return { ...state, isInitLoading: false, initError: action.payload };
    case types.PROCESS_DATA1_SUCCESS:
      return { ...state, data1: action.payload };
    case types.PROCESS_DATA2_SUCCESS:
      return { ...state, data2: action.payload };
    default:
      return state;
  }
}

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