如何在单个 redux 可观察史诗中等待/屈服于多个动作?
How to wait on / yield to multiple actions in single redux observable epic?
我有一个 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 必须先 运行 才能设置应用程序的全局加载状态。操作 2 必须在操作 1 之后 运行 并且在 API 响应返回以在网络 activity 完成时移除全局加载状态。
我是 redux-observable 的新手,但我一直在深入研究,试图弄清楚如何将这个传奇故事变成一部史诗。这里的两个目标:
- 按顺序执行操作,一个接一个,而不是运行并行执行
- 在单个史诗中执行这些操作/流程(当类型:'WATCHLIST_FETCH_REQUEST' 被触发时开始)
您如何使用 redux-observable 实现这一目标?谢谢!
我通过拼凑此处的部分对话找到了问题的答案: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
似乎是 go-to 运算符,当试图按顺序 运行 多个操作时。
我有一个 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 必须先 运行 才能设置应用程序的全局加载状态。操作 2 必须在操作 1 之后 运行 并且在 API 响应返回以在网络 activity 完成时移除全局加载状态。
我是 redux-observable 的新手,但我一直在深入研究,试图弄清楚如何将这个传奇故事变成一部史诗。这里的两个目标:
- 按顺序执行操作,一个接一个,而不是运行并行执行
- 在单个史诗中执行这些操作/流程(当类型:'WATCHLIST_FETCH_REQUEST' 被触发时开始)
您如何使用 redux-observable 实现这一目标?谢谢!
我通过拼凑此处的部分对话找到了问题的答案: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
似乎是 go-to 运算符,当试图按顺序 运行 多个操作时。