Redux - 如何访问异步派生的非序列化对象？

Question

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

通常使用异步任务，例如API调用，可以将异步任务的结果直接存储到Redux存储中，但是通过读取Redux docs，它会显示存储不可序列化的对象（如不建议在商店中使用DOM节点。

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

Answer 1

为什么不将图片网址存储在商店/状态中，然后将其传递给Image constructor？

假设url中有state：

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

这样你就不会将其设置为回调，而是作为对状态变化的反应。