如何将事件从 Redux 传递给 React？答案

【问题标题】：How To Pass Event From Redux To React?如何将事件从 Redux 传递给 React？
【发布时间】：2023-09-12 10:04:02
【问题描述】：

我有一个基于 GUI 反应/redux 的应用程序。作为视图的一部分，我希望闪烁一个“指示器”反应组件，并且闪烁是通过 CSS3 动画（动画帧）完成的。调用 react 组件的 indicator.blink() 成员函数以使指示器闪烁（它基本上从 DOM 元素中删除了 blink 类，然后在 1ms 后再次添加它，作为绕过没有“重新启动”的事实的 hack " 用于 CSS3 动画的 api)。

在 redux 框架中发生某些操作时（如果需要，它们可以是 thunk），我希望在反应视图中调用此 blink() 函数。如何最好地做到这一点？

让 redux 操作修改应用程序状态，然后指示器元素以 prop 的形式绑定到状态变量之一感觉不太对，因为它不是真正的状态，而是瞬时事件。但是我知道没有其他方法可以通过 redux 操作来更改 react 组件。

【问题讨论】：

标签： javascript events reactjs redux

【解决方案1】：

假设您想使用blink 来显示某物何时增加，您可以简单地在您的状态中保留一个计数器，并在您的组件的内部状态中保留之前的值。当它改变时，blink 并保存新值。

换句话说，从您关心的状态变化中获取所需的事件信息。

对这种瞬态行为使用内部状态是完全可以的，这就是它的用途。

【讨论】：

当事情增加时，这非常有意义。我最初认为这不适用于我的场景，但在阅读了“从您关心的状态更改中获取所需的事件信息”声明后，我意识到计数器确实适合这个目的。

【解决方案2】：

想象一下 CSS 过渡是实现细节，您不会在组件上公开方法。（无论如何，你通常不应该这样做。）

这将如何仅由道具驱动？我会想象一个布尔道具isBlinking。如果你愿意，这是你可以保持在 Redux 状态的。有一个动作创建者在几毫秒后调度START_BLINK 和STOP_BLINK。

或者你可以避免使用 Redux 并从父组件强制调用方法。

【讨论】：

如果CSS3中有这样的“重启”动画呢？在那种情况下，不需要STOP_BLINK，并且重复将isBlinking 设置为true 不会告诉React 组件任何事情，以便它可以采取行动并重新启动动画。基本上，我试图找到一个用例，其中 Redux 操作需要将事件发送到 React 视图，其中更改状态没有意义，因为该项目是“永恒的”（即事件）。我在想不可能/不可能的事情吗？
如果你遇到这种情况，你只需要绕开 Redux 和 React 流并强制执行。与 Redux 无关。在触发动作的地方执行命令式效果。
命令式效果？这是从 Redux 操作到 React 组件的某种通信方式吗？我研究过从动作内部访问 React 组件，但看起来并不容易（即，将 React.render() 返回的内容保存到全局变量，然后使用 React 测试实用程序函数挖掘出子组件） .
不，我只是说像你以前那样的方法调用。你所描述的不适合 Redux 范式，你不应该为此使用 Redux。就像你希望它闪烁时调用组件方法一样正常地做它。
哦，但是如果动作没有被 react 调度（在这种情况下很容易调用组件函数），而是服务器回调或类似的（在我的情况下，它是数据在串行端口上收到），我无法访问反应组件？

【解决方案3】：

CSS 动画中没有“重新启动”，但您可以将迭代计数指定为 infinite，这似乎可以在不涉及 Redux 的情况下解决您的问题，除了可能根据情况切换 .blinking 类打开或关闭你想让它闪烁还是不闪烁。

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1}
  100% { opacity: 0; }
}
.blinking{
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count:infinite;
}

【讨论】：