如何在组件中监听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 reducer将由listTodo.success()动作触发，并将todo列表存储到redux store中。

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

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

所以我的问题是，我怎么能观察行动流并对listTodo.success()行动作出反应？

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

更新2：有一个类似的问题qazxsw poi，但对于Angular与/ ngrx。我想要做的就是上面文章中描述的内容，但是以React / redux-observable方式：

here

Answer 1

使用redux，组件会根据状态进行更新。

如果要根据操作更新组件而不是更新reducer中的状态，例如在reducer中设置{... state，success：true}。从那里你可以像往常一样将状态读入你的组件，如果状态变为成功，则显示窗口。

Answer 2

可能会有点晚，但我通过创建一个小的npm模块解决了类似的问题。它允许您订阅和侦听redux操作，并在状态更改完成后立即执行提供的回调函数。用法如下。在componentWillMount或componentDidMount钩子中：

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();
    }

}

详细的文档可以在

 subscribeToWatcher(this,[
      {  
        action:"SOME_ACTION",
        callback:()=>{
          console.log("Callback Working");
        },
        onStateChange:true
      },
    ]);

找到