如何在组件中收听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()动作触发，并将待办事项列表存储到redux存储中。

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

• 调度一个listTodo.request()动作以检索所有动作

• 异步请求完成后（即在listTodo.success()操作出现在操作流中之后），将UI重定向到第二条路径

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

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

Answer 1

使用redux时，组件会根据状态进行更新。如果要基于操作更新组件，则要更新化简器中的状态，例如在化简器中设置{... state，success：true}。从那里您只需像往常一样简单地将状态读取到组件中，如果状态变为成功，则显示窗口。