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()操作。然后，listTodo.success()动作将触发redux reducer，并将待办事项列表存储到redux存储中。

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

调度listTodo.request()操作以检索所有操作
异步请求完成后（即listTodo.success()操作出现在操作流中之后），将用户界面重定向到第二条路径

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

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

更新2：，还有一个类似的问题here，但对于带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时，组件将根据状态进行更新。

如果要基于操作更新组件，则要更新化简器中的状态，例如在化简器中设置{... 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

我觉得对话应该是一个副作用，所以你把它们写成史诗

如何在组件中收听Redux动作流

3 个答案: