RxJS и redux-observable: delay (time) не применяется правильно после mapTo ()

Я пытаюсь отправить действие SET_MIDDLEWARE_TYPE с помощью payload.type = 'observable', подождать 5 секунд, а затем выполнить вызов API. В настоящее время действие SET_MIDDLEWARE_TYPE не отправляется. Если я удалю задержку и mergeMap, он отправит это действие.

Ожидается: FETCH_USER_WITH_OBSERVABLE_REQUEST -> SET_MIDDLEWARE_TYPE (подождите 5 секунд) -> FETCH_USER_WITH_OBSERVABLE_SUCCESS

Фактическое: FETCH_USER_WITH_OBSERVABLE_REQUEST -> (подождите 5 секунд) -> FETCH_USER_WITH_OBSERVABLE_SUCCESS

Как я могу добиться ожидаемого поведения?

Код:

import { Observable } from 'rxjs';
import { githubApi } from './api';

const githubEpic = action$ =>
 // Take every request to fetch a user
  action$.ofType('FETCH_USER_WITH_OBSERVABLES_REQUEST')
    .mapTo(({ type: 'SET_MIDDLEWARE_TYPE', payload: { type: 'observable'} }))
    // Delay execution by 5 seconds
    .delay(5000)
    // Make API call
    .mergeMap(action => {
      // Create an observable for the async call
      return Observable.from(githubApi.getUser('sriverag'))
        // Map the response to the SUCCESS action
        .map((result) => {
        return {
          type: 'FETCH_USER_WITH_OBSERVABLES_SUCCESS',
          payload: { result } ,
        };
      });
    });

export default githubEpic;

rxjs redux-observable
person Samuel Rivera Gómez    schedule 20.01.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы отказываетесь от действия SET_MIDDLEWARE_TYPE при выполнении mergeMap. Обратите внимание на параметр, который вы передаете в mergeMap, который называется action? Это не может продвинуться дальше вниз по течению, если вы не распространите его.

Вам нужно будет добавить его к исходящему потоку. Вместо этого я предлагаю вам сделать следующее:

import { Observable } from 'rxjs';
import { githubApi } from './api';

const githubEpic = action$ =>
 // Take every request to fetch a user
  action$.ofType('FETCH_USER_WITH_OBSERVABLES_REQUEST')
    .mapTo(({ type: 'SET_MIDDLEWARE_TYPE', payload: { type: 'observable'} }))
    // Delay execution by 5 seconds
    .delay(5000)
    // Make API call
    .mergeMap(action => 
      // Async call
      Observable.from(githubApi.getUser('sriverag'))
        // Map the response to the SUCCESS action
        .map(result => ({
          type: 'FETCH_USER_WITH_OBSERVABLES_SUCCESS',
          payload: { result }
        }))
        // Prepend the original action to your async stream so that it gets 
        // forwarded out of the epic
        .startWith(action)
    );

export default githubEpic;
person paulpdaniels    schedule 20.01.2017
comment
(удалил мой предыдущий комментарий, который неправильно понял. Это действительно правильный ответ.) - person jayphelps; 20.01.2017
comment
Спасибо, paulpdaniels! - person Samuel Rivera Gómez; 22.01.2017