Question

我在使用redux和redux-observable加载多个数据时遇到问题。

我需要通过ajax加载一个Serie对象，其中包含一个问题列表，并且每个问题我都需要通过ajax获取它的图像，音频和视频blob。

至于现在，我能够做到这一点，但是当我尝试在React中显示我的图像时，它不起作用。我猜测它会在加载图像之前发送Serie对象，因此一旦检索到blob它就不会更新视图。实际上，如果我在两个地图之间的Observable中添加延迟，则图像会显示在视图中。

我是redux-observable（RxJS）的新手，只是尝试让它工作，即使它在我的情况下没用。

这是我的行动档案。

carthage update --platform iOS

减速机

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 };
}

我一直在寻找关于redux和redux-observable的多篇文章，但没有找到任何可以帮助我的文章。

如何使用redux-observable处理多个加载

0 个答案: