1

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

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

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

我是 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);

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

4

0 回答 0