9

我有一个 redux Saga，每次调度“WATCHLIST_FETCH_REQUEST”时都会运行三个不同的操作：

function* watchFetchWatchlist() {
  yield takeLatest('WATCHLIST_FETCH_REQUEST', fetchWatchlist);
}


function* fetchWatchlist() {
  const activity = 'ACTIVITY_FETCH_WATCHLIST';
  yield put(
    addNetworkActivity(activity) // Action 1: enables a global loading indicator before request is made
  );
  const { response, error } = yield call(
    api.fetchWatchlist // make an API request
  );
  yield put(
    removeNetworkActivity(activity) // Action 2: removes the above global loading indicator after request completes
  );
  if (response) {
    yield put(
      updateUserWatchlist(response) // Action 3a: updates Redux store with data if response was successful
    );
  } else {
    yield put(
      watchlistFetchFailed(error) // Action 3b: updates Redux store with error if response failed
    );
  }
}

这个传奇的流程本质上是同步的。操作 1 必须首先运行才能设置应用的全局加载状态。Action 2 必须在 Action 1 之后和 API 响应返回后运行，以在网络活动完成时移除全局加载状态。

我对 redux-observable 还很陌生，但我一直在挖掘很多东西，试图弄清楚如何将这个传奇转变为史诗。这里的两个目标：

  1. 依次执行操作，一个接一个，而不是并行运行
  2. 在单个史诗中执行这些操作/流程（当 type: 'WATCHLIST_FETCH_REQUEST' 被触发时开始）

你如何使用 redux-observable 来实现这一点？谢谢！

4

1 回答 1

7

我通过在此处拼凑部分对话找到了我的问题的答案：https ://github.com/redux-observable/redux-observable/issues/62

我最终得到了一些类似的东西：

import { concat as concat$ } from 'rxjs/observable/concat';
import { from as from$ } from 'rxjs/observable/from';
import { of as of$ } from 'rxjs/observable/of';


export const fetchWatchlistEpic = (action$) => {
  const activity = 'ACTIVITY_FETCH_WATCHLIST';

  return action$.ofType('WATCHLIST_FETCH_REQUEST')
    .switchMap(() =>
      concat$(
        of$(addNetworkActivity(activity)),
        from$(api.fetchWatchlist())
          .map((data) => Immutable.fromJS(data.response))
          .switchMap((watchlist) =>
            of$(
              updateUserWatchlist(watchlist),
              removeNetworkActivity(activity),
            )
          )
      )
    );
};

concat并且of在尝试按顺序运行多个操作时似乎是首选操作员。

于 2017-02-07T07:09:39.423 回答