如何在组件中监听redux操作流

Question

我正在开发一个使用以下架构的 React 应用程序：

• redux
• typesafe-actions
• redux-observable

我的问题是：如何对特定的 redux 操作执行 UI 操作？

例如，假设我们定义了以下异步操作typesafe-actions：

export const listTodo = createAsyncAction(
  'TODO:LIST:REQUEST',
  'TODO:LIST:SUCCESS',
  'TODO:LIST:FAILURE',
)<void, Todo[], Error>();

Epic 将监视listTodo.request()并发送 API 调用，然后将响应转换为listTodo.success()操作。然后redux减速器将被listTodo.success()action触发并将todo列表存储到redux存储中。

在这种设置中，假设我想在组件中执行以下操作：

• 调度一个listTodo.request()动作来检索所有动作
• 异步请求完成后（即listTodo.success()操作出现在操作流中后），将 UI 重定向到第二个路径

所以我的问题是，我如何观看操作流并对操作做出反应listTodo.success()？

更新：为了避免过于具体，我们可以考虑另一种情况。我想简单地在操作流中出现window.alert()之后显示警报。listTodo.success()或者简单地console.log()，或者任何改变本地状态（而不是全局 redux 状态）的东西。有办法实现吗？

更新2：这里有一个类似的问题，但是对于带有ngrx的Angular。我想做的正是上面帖子中描述的事情，但是以 React / redux-observable 的方式：

import { Actions } from '@ngrx/effects';

@Component(...)
class SomeComponent implements OnDestroy {
    constructor(updates$: Actions) {
        updates$
            .ofType(PostActions.SAVE_POST_SUCCESS)
            .takeUntil(this.destroyed$)
            .do(() => /* hooray, success, show notification alert ect..             
            .subscribe();
    }

}

Answer 1

通过 redux，组件会根据状态进行更新。

如果您想根据某个操作来更新组件，那么您需要更新reducer中的状态，例如在reducer中设置{...state, success: true}。从那里，您只需像平常一样将状态读入组件，如果状态更改为成功，则显示窗口。