我是Observables和反应式编程rxjs的新手,我已将redux-observable库添加到我的react / redux应用程序中以开始使用它。
我为登录过程创建了一个史诗,基本上我想要的是,一旦触发了LOGIN_REQUEST操作,我首先启动SET_LOADING操作,以在操作未完成时向用户显示一个旋转的转轮,然后我向服务器发出休息请求以获取用户。
这是我写的代码:
const loginEpic = (action$) => {
console.log('EPIC LOGIN EXECUTED');
return action$.filter(action => action.type === LOGIN_REQUEST)
.mergeMap(action => ajax.post(getUrl(constants.LOGIN),
action.payload))
.map(response => setUser(response.response))
.takeUntil(action$.ofType(LOGIN_REQUEST_CANCELLED));
.startWith(setLoading(true));
};
触发LOGIN_REQUEST后,我正在使用运算符startWith启动SET_LOADING操作(这是我期望的行为)。
但是,我不知道为什么在首次加载应用程序时甚至没有先前的LOGIN_REQUEST操作时都会触发SET_LOADING操作。
我知道问题与startWith运算符有关,因为如果我删除,则不会触发SET_LOADING操作。那么,我在做什么错呢?为什么总是(不仅在执行LOGIN_REQUEST之后)触发此SET_LOADING操作?
谢谢
最佳答案
史诗只是一个可观察到的东西,只要它产生一个动作,它就会被调度。如果您像这样使用startWith,那么您说的是将开始进行订阅的任何人都将立即收到setLoadingAction。相反,只有在您的过滤条件为true时,才应提高loadAction。
遵循以下原则:
const loginEpic = (action$) => {
console.log('EPIC LOGIN EXECUTED');
return action$.filter(action => action.type === LOGIN_REQUEST)
.mergeMap(action => Observable.merge(
Observable.of(setLoading(true)),
Observable.fromPromise(ajax.post(getUrl(constants.LOGIN),
action.payload))
.map(response => setUser(response.response))
.takeUntil(action$.ofType(LOGIN_REQUEST_CANCELLED)));
};