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

Question

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

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

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

Answer 1

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

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

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

Answer 2

假设 CSS 转换是实现细节，您不会在组件上公开方法。（无论如何你通常不应该这样做。）

如何仅由道具驱动？我想通过一个布尔道具 isBlinking。如果您愿意，这就是您可以保留在 Redux 状态中的内容。有一个在几毫秒后调度 START_BLINK 和 STOP_BLINK 的动作创建者。

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

Answer 3

CSS 动画中没有 "restart"，但您可以将迭代次数指定为 infinite，这似乎可以在不涉及 Redux 的情况下解决您的问题，除了也许根据您是否希望它闪烁来打开或关闭 .blinking class。

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

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

How To Pass Event From Redux To React?

javascript

events

reactjs

redux