私は最近、仕事のためにredux-observablesとRxJSを学び始めたところです。Reduxではグローバルにアラートが設定されています。アラートを設定できるようにしたいのですが、設定した期間が経過したら、同じアラートを閉じます。また、いつでも複数のアラートが存在する可能性があり、ユーザーは、自動的に閉じる前に1つのアラートを手動で閉じることができます。ここでidに追加したので、正しいアラートを閉じることができます。これを達成するために、最初のマップの後の遅延を別のマップよりも使用しようとしました。ただし、これは最初のマップをスキップします。
export const addAlertEpic: Epic<Action, Action, RootState> = (
action$,
state$
) =>
action$.pipe(
ofType(slice.actions.addAlert),
map((values: any) =>
slice.actions.addAlertSuccess({ id: uuid(), ...values.payload })
)
);
助けてくれてありがとう！
アラートを設定し、設定した期間の後、同じアラートを閉じます[...]ユーザーは、自動的に閉じる前に1つのアラートを手動で閉じることができます
それを念頭に置いて、ここに私のアプローチがあります：
actions$.pipe(
ofType(slice.actions.addAlert),
// `There can also be multiple alerts at any time`
mergeMap(action => {
const id = uuid();
// using `NEVER` is important, it's essentially the same as new Observable(() => {})
// it is needed because we don't want the inner observable to complete unless `takeUntil` decides to
return NEVER
.pipe(
// start with opening the alert
startWith(slice.actions.addAlertSuccess({ id, ...action.payload }))
// close the alert either
takeUntil(merge(
// when `TIME` expires
timer(TIME),
// or when the user decides to
userClosedActions.pipe(
filter(action => action.id === id)
)
)),
// at the end(when the stream completed due to `takeUntil`), close the alert
endWith(slice.actions.closeAlertSuccess(...))
)
})
)
userClosedActionsことができますSubject送信するnextユーザーアクションの結果として通知を。例えば：
onClick (closedId) {
userClosedActions.next({ id: closedId })
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加