如何创建一个 redux-observable 史诗,它在做任何事情之前等待 2 个动作
How to create an redux-observable epic that waits for 2 actions before doing anything
我想创建一个史诗,在开始工作之前侦听明确的动作序列。
此史诗在第一次完成后也不需要存在。
我想象的是这样的:
function doTheThing(action$) {
return action$
// The start of the sequence
.ofType(FIRST_ACTION)
// Do nothing until the second action occurs
.waitForAnotherAction(SECOND_ACTION)
// the correct actions have been dispatched, do the thing!
.map(() => ({ type: DO_THE_THING_ACTION }))
.destroyEpic();
}
redux-observable
可以实现这样的功能吗?
正如@jayphelps 在评论中指出的那样,有几个变体,具体取决于您是否需要访问各种事件以及事件是否必须严格排序。所以以下应该都适合:
1) 严格排序不关心事件:
action$
.ofType(FIRST_ACTION)
.take(1)
.concat(action$.ofType(SECOND_ACTION).take(1))
.mapTo({ type: DO_THE_THING_ACTION })
2) 严格有序关心事件
action$
.ofType(FIRST_ACTION)
.take(1)
.concatMap(
a1 => action$.ofType(SECOND_ACTION).take(1),
(a1, a2) => ({type: DO_THE_THING_ACTION, a1, a2})
)
3) 非严格排序(做或不做)关心事件
Observable.forkJoin(
action$.ofType(FIRST_ACTION).take(1),
action$.ofType(SECOND_ACTION).take(1),
// Add this lambda if you *do* care
(a1, a2) => ({type: DO_THE_THING_ACTION, a1, a2})
)
// Use mapTo if you *don't* care
.mapTo({type: DO_THE_THING_ACTION})
这是使用 redux observables 的样子:
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/zip';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
function doTheThing(action$) {
return Observable
// waits for all actions listed to complete
.zip(action$.ofType(FIRST_ACTION).take(1),
action$.ofType(SECOND_ACTION).take(1),
)
// do the thing
.map(() => ({ type: DO_THE_THING_ACTION }));
}
我想创建一个史诗,在开始工作之前侦听明确的动作序列。
此史诗在第一次完成后也不需要存在。
我想象的是这样的:
function doTheThing(action$) {
return action$
// The start of the sequence
.ofType(FIRST_ACTION)
// Do nothing until the second action occurs
.waitForAnotherAction(SECOND_ACTION)
// the correct actions have been dispatched, do the thing!
.map(() => ({ type: DO_THE_THING_ACTION }))
.destroyEpic();
}
redux-observable
可以实现这样的功能吗?
正如@jayphelps 在评论中指出的那样,有几个变体,具体取决于您是否需要访问各种事件以及事件是否必须严格排序。所以以下应该都适合:
1) 严格排序不关心事件:
action$
.ofType(FIRST_ACTION)
.take(1)
.concat(action$.ofType(SECOND_ACTION).take(1))
.mapTo({ type: DO_THE_THING_ACTION })
2) 严格有序关心事件
action$
.ofType(FIRST_ACTION)
.take(1)
.concatMap(
a1 => action$.ofType(SECOND_ACTION).take(1),
(a1, a2) => ({type: DO_THE_THING_ACTION, a1, a2})
)
3) 非严格排序(做或不做)关心事件
Observable.forkJoin(
action$.ofType(FIRST_ACTION).take(1),
action$.ofType(SECOND_ACTION).take(1),
// Add this lambda if you *do* care
(a1, a2) => ({type: DO_THE_THING_ACTION, a1, a2})
)
// Use mapTo if you *don't* care
.mapTo({type: DO_THE_THING_ACTION})
这是使用 redux observables 的样子:
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/zip';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
function doTheThing(action$) {
return Observable
// waits for all actions listed to complete
.zip(action$.ofType(FIRST_ACTION).take(1),
action$.ofType(SECOND_ACTION).take(1),
)
// do the thing
.map(() => ({ type: DO_THE_THING_ACTION }));
}