Redux - 如何访问异步派生的不可序列化对象？答案

【问题标题】：Redux - How to access a non-serializable object which is derived asynchronously?Redux - 如何访问异步派生的不可序列化对象？
【发布时间】：2017-01-04 23:45:35
【问题描述】：

我的用户提供了一个 URL，我想在我的 React+Redux 应用程序中使用该 URL 作为 <canvas> 元素的背景。这意味着我的 React 组件的 render() 方法需要访问 <img>包含用户图像的 DOM 节点。不幸的是，设置图像标签的src 属性是异步的，因为在从服务器获取数据之前，请求的图像实际上不会填充到 DOM 中。

通常对于异步任务，例如 API 调用，会将异步任务的结果直接存储到 Redux 存储中，但从读取 Redux docs 来看，它似乎存储了不可序列化的对象（如 DOM不建议在 store 中使用 node)。

还有其他合理的方法来解决这个问题吗？目前我在滥用我的 React 组件的生命周期方法来观察 URL prop 的变化，然后将<img> DOM 节点异步设置为组件的状态，感觉很尴尬。

【问题讨论】：

所以用户输入了一个 URL，你想存储 BLOB？你是如何设置背景的？
@martriay 我想将用户提供的图像绘制到画布中。使用developer.mozilla.org/en-US/docs/Web/API/…
我不确定你所说的“blob”是什么意思。为了更清楚起见，我希望我可以长期使用 <img> 节点，以便我可以在道具更改时重绘 <canvas>，始终使用用户的 URL 作为背景。

标签： canvas reactjs redux react-redux

【解决方案1】：

为什么不将图像 URL 存储在 store/state 中并将其传递给 Image constructor？

假设您在state 中有url：

render() {
  var bg = new Image()
  bg.src = this.state.url
  // here you use the bg as an <img> element
}

这样您就不会将其设置为回调，而是作为对状态更改的反应。

【讨论】：

不幸的是，在触发“加载”事件之前，您无法可靠地使用bg。如果您尝试立即使用它，它仍然是空的，因为图像尚未下载。有关更多上下文，请参阅此答案：stackoverflow.com/a/16006223/1263117
你是对的。我认为除了将 DOM 元素存储在商店中并通过观察 isReady 变量或类似的东西来等待图像加载之外别无选择。