Javascript 如何使用redux observable处理多个负载

我在加载多个redux和redux可见的数据时遇到问题

我需要通过ajax加载一个Serie对象，该对象包含一个问题列表，对于每个问题，我也需要通过ajax获取它的图像、音频和视频

就目前而言，我能够做到这一点，但当我试图在React中显示我的图像时，它不起作用。我猜它在加载图像之前发送Serie对象，因此一旦检索到blob，它不会更新视图。事实上，如果我在两张地图之间增加一个延迟，图像就会出现在视图中

我是redux observable（RxJS）的新手，我只是尝试让它工作，即使它在我的案例中没有用处

这是我的行动文件

import { Observable } from 'rxjs';

import { GET_SERIE, FETCH_SERIE } from './types';
import { ROOT_URL, SETTINGS } from './settings';

export function getSerie() {
  return { type: GET_SERIE }
}

function getBlob(assets) {
  return assets.map(asset => {
    fetch(asset.url_lg ? asset.url_lg : asset.url)
      .then(response => response.blob())
      .then(blob => asset['blob'] = URL.createObjectURL(blob))
    return asset;
  });
}

function getAssets(serie) {
  serie.questions.forEach(question => {
    question.pictures = getBlob(question.pictures);
    question.audios = getBlob(question.audios);
    question.videos = getBlob(question.videos);
  });

  return serie;
}

function setSerie(serie) {
  return {
    type: FETCH_SERIE,
    serie
  }
}

const fetchSerie = () =>
  fetch(`${ROOT_URL}/free_serie`, SETTINGS)
    .then((response) => response.json());

export const fetchSerieEpic = (action$) =>
  action$.ofType(GET_SERIE)
    .mergeMap((action) =>
      Observable.from(fetchSerie())
        .map(({ data }) => getAssets(data.serie))
        .map( serie => setSerie(serie))
    );

减速器

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

const initialState = {
  serie: null
};

export default function(state = initialState, action) {
  switch (action.type) {
    case types.FETCH_SERIE:
      return setSerie(state, action);
    default:
      return state;
  }
}

function setSerie(state, action) {
  const { serie } = action;

  return { ...state, serie };
}

以及发送事件的视图

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from '../actions';

class App extends Component {
  componentWillMount() {
    this.props.fetchSerie();
  }

  render() {
    if(this.props.serie !== null) {
      return(
        <div>{this.props.children}</div>
      );
    }

    return <div>Loading ...</div>;
  }
}

function mapStateToProps(state) {
  const { serie } = state;

  return serie;
}

function mapDispatchToProps(dispatch) {
  return {
    fetchSerie: bindActionCreators(actions.getSerie, dispatch)
  };
}

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

import React，{Component}来自'React'；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
将*作为动作从“../actions”导入；
类应用程序扩展组件{
组件willmount（）{
this.props.fetchSerie（）；
}
render（）{
if（this.props.serie！==null）{
返回(
{this.props.children}
);
}
返回装载。。。；
}
}
函数MapStateTops（状态）{
const{serie}=状态；
返回意甲；
}
功能图DispatchToprops（调度）{
返回{
fetchSerie:bindActionCreators（actions.getSerie，dispatch）
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

---

我已经阅读了多篇关于redux和redux observable的文章，但没有找到任何可以帮助我的东西。

问题在于承诺，在您从

getAssets

返回的内容中，每个问题的属性都是一系列承诺。你需要等待这些问题的解决，你可以使用Promise.all或make.Observable。我不知道如何实现这一点，但我会尝试一下！谢谢问题是承诺，在您从

getAssets

返回的内容中，每个问题的属性都是承诺的数组。你需要等待这些问题的解决，你可以使用Promise.all或make.Observable。我不知道如何实现这一点，但我会尝试一下！谢谢