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

Question

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

• redux
• typesafe-actions
• redux-observable

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

例如，假设我们使用typesafe-actions定义了以下异步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()动作触发并将待办事项列表存储到 redux store 中。

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

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

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

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

更新2：有一个类似的问题在这里，但对角W / NGRX。 我想要做的正是上面帖子中描述的事情，但是以 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}。 从那里您只需像往常一样将状态读入您的组件，如果状态变为成功，则显示您的窗口。

Answer 2

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

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

详细文档可以在https://www.npmjs.com/package/redux-action-watcher找到

Answer 3

我觉得对话应该是一个副作用，所以你会把它们放在史诗中