Redux嵌套Thunks整合：如何从双接口获取WordPress初始数据

我来帮你搞定这个Thunk合并的问题，核心思路是先拉取完所有文章数据，再从中提取所有标签ID、去重避免重复请求，最后批量触发标签获取请求。下面是具体的实现方案：

完整的合并Thunk代码 #

export function getDataAndTag() {
  return (dispatch, getState) => {
    // 先触发文章数据请求，等待请求完成
    return dispatch(fetchData()).then(() => {
      // 从Redux状态中取出已加载的文章数据
      // 这里假设你的文章存在state.videos.posts路径下，记得根据实际项目调整
      const posts = getState().videos.posts;
      
      // 提取所有文章里的标签ID，合并成一个数组
      const allTagIds = posts.flatMap(post => post.tags);
      
      // 对标签ID去重，避免同一个标签被多次请求
      const uniqueTagIds = [...new Set(allTagIds)];
      
      // 批量触发每个标签的请求，用Promise.all等待所有请求完成
      return Promise.all(
        uniqueTagIds.map(tagId => dispatch(getTag(tagId)))
      );
    });
  };
}

关键细节解释 #

• 状态读取：getState()用来获取当前Redux的状态，你需要根据自己项目中存储文章的实际路径调整getState().videos.posts（比如如果文章存在state.posts.list就改成对应路径）。
• 标签ID去重：用Set对所有标签ID去重，能有效减少不必要的网络请求，提升性能。
• 批量请求处理：Promise.all会等待所有标签请求都完成后才会resolve，这样你可以在后续的链式调用里处理所有标签加载完成后的逻辑（比如更新页面加载状态）。

额外优化建议 #

如果你的标签请求频率较高，可以在getTag Thunk里加一层缓存判断——先检查状态中是否已有该标签数据，有就直接返回，不再发起网络请求：

export function getTag(id) {
  return (dispatch, getState) => {
    // 先检查状态中是否已存在该标签
    const existingTag = getState().tags.items?.find(tag => tag.id === id);
    if (existingTag) {
      // 已有数据，直接resolve，不发起请求
      return Promise.resolve();
    }
    
    const url = "http://app.rguc.co.uk/?rest_route=/wp/v2/tags/" + id;
    return fetch(url)
      .then(response => response.json())
      .then(data => {
        data ? dispatch(fetchSuccessTags(data)) : dispatch(fetchErrorTags(data));
      })
      .catch(error => console.log(error));
  };
}

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