Redux 存储区外的 Redux 状态

Question

我的情况是我的反应应用程序具有我想显示的一些图像，

export const myImages = Map()
  .set('image-one, {
    name: 'Foo',
    source: require('./foo'),
  })
  .set('image-two, {
    name: 'Bar',
    source: require('./bar'),
  })

我让用户选择所讨论的图像类型，例如：

export const selectImageSaga = function*({ imageId }) {
  yield put({ type: 'SELECT_IMAGE', imageId /* image-one, image-two, etc. */})

现在，在我的商店中，我提到了要显示的图像。我可以打电话给myImages.get(reduxState.imageId)以获取我想要的数据，都很好。我真的很讨厌这个。

现在，我的传奇和我的反应组件都需要参考外部，并且（可能在此示例中我没有显示）可变的对象，以获取他们需要时需要的数据。

如果不是source，我将简单地存储我感兴趣的文件的路径或URI，仅此而已，我将把所有状态都保留在Redux中。

我的替代方案是什么？

Answer 1

这里没有魔法，我看到3个主要行动途径：

1. 您的操作发送了所有必要的信息。可以通过将责任转移到动作的呼叫者中来完成，或者动作创建者本身将从外部潜在可变的对象中获取数据，将其正常化并将其传递给还原器。
2. 您的还原器从操作中获取ID，并将其与外部对象结合使用。同样，这意味着Redux Store具有所有必要的信息。
3. 您的选择器（或者如果您没有选择器，则您的React组件）接受ID并将其与外部对象结合。如果您执行诸如将商店持续到LocalStorage之类的事情（因为您只能坚持ID，而不是所有信息）
）

1的优点是您的还原器愚蠢且无状态，获取相关信息的逻辑是在动作创建者中完成的。

2的优点是...嗯，老实说，我想不到太多，如果您找到一个。

3的优点是您的商店保持相对较小且简单，这有助于服务器端渲染和localstorage持久性。但反过来，它会使您的反应组件变得不那么纯净。

---

我恐怕这里没有银弹，您需要根据项目的需求和约定做出决定。