使用Redux Thunk时，如何在Store中优雅合并异步请求对象？

这确实是个非常常见的Redux场景——当你有一份全局共享的基础数据（比如你的Object1），需要和其他业务数据做关联时，在组件里写合并逻辑不仅会让组件变得臃肿，还容易在多个组件里重复相同的代码。下面分享几个在Redux层面处理这种数据合并的优雅方案，帮你把逻辑从组件里解放出来：

1. 在Action Creator中完成依赖请求与合并 #

既然Object1是几乎所有组件都需要的基础数据，我们可以先确保它已经加载完成，再请求Object2并直接在action层完成数据合并，最后将合并后的结果存入Store。这样组件拿到的就是现成的关联数据，完全不用处理合并逻辑。

示例代码： #

// 先封装一个可复用的Object1获取方法，避免重复请求
const getObject1 = () => {
  return (dispatch, getState) => {
    const { object1 } = getState();
    // 检查Store中是否已有加载完成的Object1，有则直接返回
    if (object1.data && !object1.isFetching) {
      return Promise.resolve(object1.data);
    }

    dispatch(fetchObject1Request());
    return axios.get("URL1")
      .then(response => {
        dispatch(fetchObject1Success(response.data));
        return response.data;
      })
      .catch(error => {
        console.error(JSON.stringify(error));
        dispatch(errorOccurred(fetchObject1Request(), error));
        throw error; // 抛出错误让上层处理
      });
  };
};

// 新增的合并版Object2请求action creator
export const fetchObject2WithMerge = () => {
  return (dispatch) => {
    dispatch(fetchObject2Request());
    // 先获取Object1，再请求Object2并完成合并
    return dispatch(getObject1())
      .then(object1Data => {
        return axios.get("URL2")
          .then(object2Response => {
            // 在这里完成数据关联合并
            const mergedData = object2Response.data.map(item => ({
              ...item,
              // 从Object1中匹配对应的人员姓名
              personName: object1Data.find(person => person.id === item.personId)?.name
            }));
            dispatch(fetchObject2Success(mergedData));
            return mergedData;
          });
      })
      .catch(error => {
        console.error(JSON.stringify(error));
        dispatch(errorOccurred(fetchObject2Request(), error));
      });
  };
};

组件简化后的代码： #

class Peoples extends Component {
  componentWillMount(){
    // 只需要调用这个合并后的action即可
    this.props.fetchObject2WithMerge();
  }

  render() {
    const { object2 } = this.props;
    if (object2.isFetching) {
      return <div>Loading...</div>;
    }
    // 直接使用已经合并好的数据
    return (
      <div>
        {object2.data.map(item => (
          <div key={item.id}>{item.personName}</div>
        ))}
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    fetchObject2WithMerge: () => dispatch(fetchObject2WithMerge())
  }
};

const mapStateToProps = state => {
  return {
    object2: state.object2
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Peoples);

这个方案的核心优势是：组件完全不用关心数据关联逻辑，所有合并操作都在Redux的action层完成，同时还能确保Object1只会被请求一次。

2. 用Reselect创建派生数据Selector（推荐） #

如果你想保持原始数据的独立性，同时复用合并逻辑，可以使用Redux官方推荐的Reselect库来创建派生数据的Selector。它会自动缓存计算结果，只有当依赖的state发生变化时才重新计算，性能友好。

示例代码： #

首先安装Reselect（如果还没装的话），然后创建Selector：

import { createSelector } from 'reselect';

// 基础Selector：获取Store中的原始数据
const selectObject1Data = state => state.object1.data;
const selectObject2Data = state => state.object2.data;
const selectObject1IsFetching = state => state.object1.isFetching;
const selectObject2IsFetching = state => state.object2.isFetching;

// 创建合并数据的派生Selector
export const selectMergedPeoples = createSelector(
  [selectObject1Data, selectObject2Data, selectObject1IsFetching, selectObject2IsFetching],
  (object1Data, object2Data, isObject1Fetching, isObject2Fetching) => {
    // 只要有一个数据在加载，就返回加载状态
    if (isObject1Fetching || isObject2Fetching || !object1Data || !object2Data) {
      return { isFetching: true, json: [] };
    }
    // 执行数据合并逻辑
    const mergedJson = object2Data.map(item => ({
      ...item,
      personName: object1Data.find(person => person.id === item.personId)?.name
    }));
    return { isFetching: false, json: mergedJson };
  }
);

组件中使用Selector： #

import { selectMergedPeoples } from './your-selectors-file';

class Peoples extends Component {
  componentWillMount(){
    this.props.fetchObject1();
    this.props.fetchObject2();
  }

  render() {
    const { mergedPeoples } = this.props;
    if (mergedPeoples.isFetching) {
      return <div>Loading...</div>;
    }
    return (
      <div>
        {mergedPeoples.json.map(item => (
          <div key={item.id}>{item.personName}</div>
        ))}
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    fetchObject1: () => dispatch(fetchObject1()),
    fetchObject2: () => dispatch(fetchObject2())
  }
};

// 通过Selector获取合并后的派生数据
const mapStateToProps = state => {
  return {
    mergedPeoples: selectMergedPeoples(state)
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Peoples);

这个方案的优势：

• 组件依然专注于UI渲染，数据合并逻辑抽离到独立的Selector中，可在多个组件复用
• Reselect的缓存机制避免了不必要的重复计算，提升应用性能
• 原始的state数据保持独立，不会破坏Redux单一数据源的原则

总结 #

• 如果你希望数据存入Store时就已经是合并好的状态，选择方案1（action层合并）
• 如果你想保持原始数据的独立性，同时复用合并逻辑，选择方案2（Reselect Selector）

这两个方案都比在组件内处理合并要优雅，逻辑更集中，也更便于后续维护和扩展。

内容的提问来源于stack exchange，提问作者Michał Mielec