TypeScript redux-observable.combineEpics函數代碼示例

export const pricingServiceEpic = (pricingService$, openFin, referenceDataService) => {
  const stalePriceEpic = action$ => {
    // For each symbol
    return getSymbol$(action$)
    // creates a new price stream and will wait to debounce
      .mergeMap(symbol => pricingService$.getSpotPriceStream({symbol}).debounceTime(MS_FOR_LAST_PRICE_TO_BECOME_STALE))
      // when debounces, it creates an action
      .map(createStalePriceAction)
  }

  const publishPriceToOpenFinEpic = action$ => {
    return priceForReferenceServiceSymbols$(action$, pricingService$)
      .map(addRatePrecisionToPrice(referenceDataService))
      .do(publishPriceToOpenFin(openFin))
      // Hack to never emit any actions, because we don't need any action.
      .takeLast()
  }

  const updatePricesEpic = action$ => {
    return priceForReferenceServiceSymbols$(action$, pricingService$)
      .scan(reducePrices, {})
      .map(createSpotPricesUpdateAction)
  }

  const pricingServiceStatusEpic = action$ => {
    return action$.ofType(REF_ACTION_TYPES.REFERENCE_SERVICE)
    // when previous action happens, starts listening on the service status
      .flatMapTo(pricingService$.serviceStatusStream)
      // creates action if service status changes
      .map(createPricingServiceStatusUpdateAction)
  }

  return combineEpics(updatePricesEpic, stalePriceEpic, pricingServiceStatusEpic, publishPriceToOpenFinEpic)
}

export const createStore = () =>
    reduxCreateStore(
        combineReducers<ChatState>({
            adaptiveCards,
            connection,
            format,
            history,
            shell,
            size
        }),
        applyMiddleware(createEpicMiddleware(combineEpics(
            updateSelectedActivityEpic,
            sendMessageEpic,
            trySendMessageEpic,
            retrySendMessageEpic,
            showTypingEpic,
            sendTypingEpic,
            speakSSMLEpic,
            speakOnMessageReceivedEpic,
            startListeningEpic,
            stopListeningEpic,
            stopSpeakingEpic,
            listeningSilenceTimeoutEpic
        )))
    );

  constructor(
    private devTools: DevToolsExtension,
    private ngRedux: NgRedux<IAppState>,
    private ngReduxRouter: NgReduxRouter,
    private actions: SessionActions,
    private sessionEpics: SessionEpics,
    private listEpics: ListEpics) {

    const enh = (__DEV__ && devTools.isEnabled()) ?
      [ ... enhancers, devTools.enhancer({
        deserializeState: reimmutify,
      }) ] :
      enhancers;

// I don't know how to get this to work so I put a call to it in the action. 
// That is more explicit, I think too which I've heard recommended.
//    middleware.push(createEpicMiddleware(this.listEpics.saveAll));
    middleware.push(createEpicMiddleware(
                      combineEpics(this.sessionEpics.login, 
                                    this.listEpics.saveAll
                                   )
                                   ));

    ngRedux.configureStore(rootReducer, {}, middleware, enhancers);
    ngReduxRouter.initialize();
  }

export const pricingServiceEpic = (pricingService$) => {

  const pricingStream$ = action$ => action$.ofType(REF_ACTION_TYPES.REFERENCE_SERVICE)
    .map(action => action.payload.currencyPairUpdates.map(currency => currency.currencyPair.symbol))

  function stalePriceCheck(action$) {
    return pricingStream$(action$)
      .mergeMap((symbols: Array<string>) => {
        return Observable.from(symbols)
          .mergeMap(symbol => pricingService$.getSpotPriceStream({ symbol })
            .debounce(() => Observable.interval(PRICE_STALE_AFTER_X_IN_MS))
            .map(stalePricing))
      })
  }

  function getPrices(action$) {
    return pricingStream$(action$)
      .mergeMap((symbols: Array<string>) => getCurrencyPairs(symbols, pricingService$))
      .scan(accumulatePrices, {}).map(fetchPricing)
  }

  function subscribeToConnectionStatus(action$) {
    return pricingStream$(action$)
      .flatMap(item => pricingService$.serviceStatusStream)
      .map(pricingStatusUpdate)
  }

  return combineEpics(getPrices, stalePriceCheck, subscribeToConnectionStatus)
}

export const createRootEpic = <State>() =>
  combineEpics(
    createTimelineEpic<State>(),
    createTimelineFavoriteEpic<State>(),
    createTimelineNoteEpic<State>(),
    createTimelinePinnedEventEpic<State>()
  );

const epicMiddleware = (referenceDataService, blotterService, pricingService, analyticsService, compositeStatusService, executionService, openFin) => createEpicMiddleware(
  combineEpics(
    referenceServiceEpic(referenceDataService),
    blotterServiceEpic(blotterService),
    pricingServiceEpic(pricingService),
    analyticsServiceEpic(analyticsService),
    compositeStatusServiceEpic(compositeStatusService),
    connectionStatusEpicsCreator(compositeStatusService),
    spotTileEpicsCreator(executionService, pricingService, referenceDataService),
    popoutEpic(),
    footerEpic(openFin),
  ),
)

export default function configureStore(initialState: Partial<AppState>) {
  const rootEpic = combineEpics<Epic>(...coreEpics.allEpics);
  const epicMiddleware = createEpicMiddleware();
  const middlewares = [epicMiddleware, coreMiddlewares.errorMiddleware];

  const store = createStore(
    rootReducer,
    // TODO: Properly type redux store for jupyter-extension
    (initialState as unknown) as any,
    composeEnhancers(applyMiddleware(...middlewares))
  );

  epicMiddleware.run(rootEpic);

  return store;
}

export function connectionStatusEpicsCreator(compositeStatusService$) {
  const connectToServices = () => compositeStatusService$.connection.connect()

  const updateConnectionStateEpic = () => {
    return compositeStatusService$.connectionStatusStream
      .map(connectionStatusToState(compositeStatusService$))
      .map(createConnectionStatusUpdateAction)
  }

  const reconnectEpic = (action$) => {
    return action$.ofType(ACTION_TYPES.RECONNECT)
      .do(connectToServices)
      // Hack to never emit any actions, because we don't need any action.
      .takeLast()
  }

  return combineEpics(updateConnectionStateEpic, reconnectEpic)
}

export function spotTileEpicsCreator(executionService$, pricingService$, referenceDataService$) {
  function executeTradeEpic(action$) {
    return action$.ofType(ACTION_TYPES.EXECUTE_TRADE)
      .flatMap((action) => {
        return executionService$.executeTrade(action.payload)
      })
      .map(tradeExecuted)
  }

  function onPriceUpdateEpic(action$) {
    return action$.ofType(PRICING_ACTION_TYPES.PRICING_SERVICE)
      .map((payload) => {
        _.values(payload.payload).forEach((item: SpotPrice) => {
          // TODO: do it better
          item.currencyPair = item.currencyPair || referenceDataService$.getCurrencyPair(item.symbol)
        })
        return payload
      })
      .map(action => action.payload)
      .map(updateTiles)
  }

  function displayCurrencyChart(action$) {
    return action$.ofType(ACTION_TYPES.DISPLAY_CURRENCY_CHART)
      .flatMap((payload) => {
        return Observable.fromPromise(payload.payload.openFin.displayCurrencyChart(payload.payload.symbol))
      })
      .map((symbol) => {
        return currencyChartOpened(symbol)
      })
  }

  function onTradeExecuted(action$) {
    return action$.ofType(ACTION_TYPES.TRADE_EXECUTED)
      .delay(DISMISS_NOTIFICATION_AFTER_X_IN_MS)
      .map(action => ({ symbol: action.payload.trade.CurrencyPair || action.payload.trade.currencyPair.symbol }))
      .map(dismissNotification)
  }

  return combineEpics(executeTradeEpic, onPriceUpdateEpic, displayCurrencyChart, onTradeExecuted)
}

export function connectionStatusEpicsCreator(compositeStatusService$) {

  function connectionStatusEpic(action$) {
    return compositeStatusService$.connectionStatusStream
      .map((connectionStatus) => {
        return {
          connection: connectionStatus || '',
          connectionType: compositeStatusService$.connectionType || '',
          url: compositeStatusService$.connectionUrl || '',
        }
      })
      .map(fetchConnectionStatus)
  }

  function reconnectEpic(action$) {
    return action$.ofType(ACTION_TYPES.RECONNECT)
      .flatMap((action$) => {
        compositeStatusService$.connection.connect()
        return fetchConnectionStatus
      })
  }

  return combineEpics(connectionStatusEpic, reconnectEpic)
}

import { combineEpics } from 'redux-observable';
import { getQuestionsEpic, updateQuestion, getTemplateQuestionsEpic, updateTemplateQuestionsEpic, getApplicationTemplateEpic, saveApplication, replyToApplication, deleteApplication } from './application';
import { getBlogPosts, deleteBlogPost } from './blog';

export const appEpic = combineEpics(
  getQuestionsEpic,
  updateQuestion,
  getTemplateQuestionsEpic,
  updateTemplateQuestionsEpic,
  getApplicationTemplateEpic,
  saveApplication,
  deleteApplication,
  replyToApplication,
  getBlogPosts,
  deleteBlogPost,
);

export const createLogEntriesEpic = <State>() =>
  combineEpics(
    createEntriesEffectsEpic<State>(),
    loadEntriesEpic as EpicWithState<typeof loadEntriesEpic, State>,
    loadMoreEntriesEpic as EpicWithState<typeof loadEntriesEpic, State>
  );

  );

const fetchAllReposEpic = (action$, store) =>
  action$.pipe(
    ofType(FETCH_ALL_REPOS),
    flatMap(({ username, startPage }) => {
      const userTotalRepos = store.value.user.get("starred");
      const totalPages = Math.ceil(userTotalRepos / 30) + 1;

      return forkJoin(
        ...Range(startPage, totalPages)
          .map(page =>
            get({
              endpoint: `users/${username}/starred`,
              params: { page }
            })
          )
          .toArray()
      ).pipe(
        map(repos => AddRepos(List(repos).flatten(1))),
        catchError(err => of(setError(err), stopLoading()))
      );
    })
  );

export default combineEpics(
  fetchReposEpic,
  fetchTotalReposLengthEpic,
  fetchAllReposEpic
);

import { combineEpics, Epic } from 'redux-observable';
import { isActionOf } from 'typesafe-actions';
import { Observable } from 'rxjs/Observable';
import cuid from 'cuid';

import { RootAction, RootState } from '@src/redux';
import { todosActions } from '@src/redux/todos';
import { toastsActions } from './';

const TOAST_LIFETIME = 2000;

const addTodoToast: Epic<RootAction, RootState> =
  (action$, store) => action$
    .filter(isActionOf(todosActions.addTodo))
    .concatMap((action) => { // action is type: { type: "ADD_TODO"; payload: string; }
      const toast = { id: cuid(), text: action.payload.title };

      const addToast$ = Observable.of(toastsActions.addToast(toast));
      const removeToast$ = Observable.of(toastsActions.removeToast(toast.id))
        .delay(TOAST_LIFETIME);

      return addToast$.concat(removeToast$);
    });

export const epics = combineEpics(addTodoToast);

  action$.pipe(
    ofType(FETCH_GITHUB_TOKEN),
    mergeMap(({ code }) =>
      get({
        fullEndpoint: "https://api.giistr.com/github-login",
        params: { code }
      })
    ),
    map((res: any) => oauthUser(res.get("access_token")))
  );

const oauthUserEpic = action$ =>
  action$.pipe(
    ofType(OAUTH_USER),
    concatMap(({ token }) =>
      get({
        endpoint: "user",
        params: { access_token: token }
      }).pipe(map(user => addUser(user.set("access_token", token))))
    )
  );

const fetchUserEpic = action$ =>
  action$.pipe(
    ofType(FETCH_USER),
    mergeMap(({ username }) => get({ endpoint: `users/${username}` })),
    map(addUser)
  );

export default combineEpics(fetchTokenEpic, oauthUserEpic, fetchUserEpic);