另一个组件如何在 react/redux 中监听另一个组件的动作？

Posted 2023-02-22

【中文标题】另一个组件如何在 react/redux 中监听另一个组件的动作？

【英文标题】：How does another component listen from another component actions in react/redux?

【发布时间】：2018-05-15 02:18:23

【问题描述】：

Let say组件A需要知道另一个组件是否派发了一个action以及let say通过redux-thunk异步调用API的返回响应，组件@987654322如何@ 听那个动作并对响应做些什么？

或者任何组件如何监听另一个组件的调度调用，不管它是父组件还是子组件？如果这有意义的话。

---

我刚刚学习 React/Redux 几个月，只是为了给你一个见解。

非常感谢任何建议。

【参考方案1】：

您可以监听来自任何组件的已调度操作，只要它们连接到您的状态树，也就是您的 redux 存储。但请确保组件应连接到完全相同的状态/存储部分。

【讨论】：

如果调度的动作没有真正改变任何状态怎么办？假设一个创建表单，它对 api 进行异步调用以创建帖子。它并没有真正改变商店中的任何状态，但我希望查看页面组件来监听该操作并调用他自己的异步来获取新的邮政？如果我理解正确。请指教，您能否指导我查看从组件内部监听任何操作的代码？

我不确定您是否可以在不改变状态的情况下采取行动，但您可以在发布将改变状态的表单数据之前立即发送另一个操作（比如 sendingFormData: false 到 @ 987654322@)，然后您的视图组件将知道该状态更改并采取相应措施。

这实际上也是我的想法，但这样做似乎很难看。本质上，我只是希望负责的组件从 API 获取响应并根据结果做一些事情。但这就是 redux 的工作方式吗？您需要将状态更改为内部应用程序以触发操作吗？更改实际上发生在数据库中，所以这实际上是我想听的。但如果这是我能让它发挥作用的唯一方法。我想它会做的。我会试一试。谢谢您的意见。

哦，是的，我明白这一点！我只是希望无论如何都有某种通用的方式来倾听行动。但这绝对是我能做到的！也许我可以仰望一个中间件，它可以做到这一点，但现在这是一种方式。谢谢科坦！救生员。

或者在您的组件中，您可以侦听操作负载。如果动作负载未定义或您为减速器设置的任何初始值，那么您的组件将不会打扰，但如果动作负载中有数据将传递给减速器，那么组件将知道它。下面是一个小例子：dispatch(type: "RECEIVED_FORM_DATA", data: //response from api)reducer：case: "RECEIVED_FORM_DATA": return ...state, data: action.datacomponent：this.props.reducerName.data !== null(or blank or undefined) ? //do something : null

【参考方案2】：

感谢下面的Ketan，它给了我一个想法，在商店里有一个状态

action:type:'ACTION_WHATEVER',payload:

每当调用一个动作时，它都会将其底层状态更改为动作名称及其有效负载。

组件现在可以调用componentWillReceiveProps 或shouldComponentUpdate 并从操作对象中检查类型和有效负载。

【参考方案3】：

抱歉，如果我在这里遗漏了什么，但您可以使用 Redux 的“订阅”方法从任何组件监听您的 Redux 存储中的任何更改。它接受一个侦听器回调函数，只要商店的状态发生变化，就会调用该回调函数。这两个来源很好地解释了它:) https://egghead.io/lessons/react-redux-store-methods-getstate-dispatch-and-subscribe https://redux.js.org/docs/api/Store.html#subscribe

【讨论】：

实际上，如果您不实际更改商店中的任何内容会怎样？因为您基本上是在更改数据库本身？另外，您将如何在组件类中进行订阅？