纯减速器和画布上下文？答案

【问题标题】：Pure reducers and canvas context?纯减速器和画布上下文？
【发布时间】：2018-11-20 13:28:09
【问题描述】：

我正在创建一个 MS Paint 副本。在搞砸了一周的 React 状态之后，我想使用 Redux。我想到的问题是：我如何才能将一个必须是纯的 reducer 与一个基本上有自己状态的画布上下文（在上面绘制什么）配对？我在这里看到两个选项：

是否需要在每次状态更改时重新创建画布上下文？如果是这样，我确实认为这确实是多余的做法。
或者我可以像往常一样只在状态之间携带上下文并使用它的方法来绘制减速器吗？但据我所知，这使我的减速器不纯。

谢谢。

【问题讨论】：

标签： reactjs redux html5-canvas

【解决方案1】：

我假设画布上下文不容易序列化，并且它不是应用程序状态的“真实来源”（而是由本机浏览器 api 创建的对象）。因此，我只会使用 redux 来获得撤消/时间旅行功能。你的 reducer 只会保存绘制动作的历史。在空白画布上重放它们应该会恢复应用的状态。

【讨论】：

现在我将在商店中保存我的上下文的 ImageData。 ImageData 基于 Uint8ClampedArray 所以据我所知它是可序列化的。我的动作创建者通过将 ImageData 放到上下文中，在其上绘制一些东西，然后在动作中调度更改的 ImageData 来使用该 ImageData。这种方法是否足够正确？
ImageData，单数？这听起来像是画布上所有像素的位图。我想这对撤消有用，因为你可以回到以前的状态，这基本上是整个画布的快照。如果画布很大，这可能会积累大量数据。上面答案中的链接可能是您最好的选择，在我看来，这是一种奇特的用例。祝你好运！
此时将状态作为用户的每一个画布动作的序列对我来说太复杂了。所以我现在只有一个 ImageData（是的，它只是一个所有像素的 rgba 值数组），它更简单地环绕我的头并完成它的工作。感谢您的帮助！

【解决方案2】：

画布代表应用程序的 UI，不应保留在商店本身中。由于画布会保留已绘制的所有像素，因此您可能需要做的是在商店更新时重新执行绘制逻辑。

有两篇文章演示了如何使用 Redux 存储在画布上作为 UI 驱动绘图：

【讨论】：

【解决方案3】：

我选择在 Redux 存储中存储 ImageData（通过上下文 getImageData 方法获取）。这使商店保持可序列化和不可变。不过我在性能方面遇到了一些麻烦，因为getImageData 和putImageData 非常慢，所以我需要尽可能少地更新我的商店中的 ImageData。

【讨论】：