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

Question

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

对于异步任务，例如API调用，通常会将异步任务的结果直接存储到Redux存储中，但从阅读Redux文档来看，似乎不建议在存储中存储不可序列化的对象(如DOM节点)。

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

Answer 1

为什么不将图像URL存储在store/state中，然后将其传递给Image构造函数?

假设state中有url:

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

这样你就不用把它设置为回调，而是作为对状态变化的反应。