Redux的商店外面的Redux州

Question

我的情况是我的react-native应用程序有一些我想要显示的图像，

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)来获取我想要的数据，一切都很好。 我真讨厌这个。

现在我的saga和我的react组件都需要引用一个外部的（可能，我在这个例子中没有显示这个）可变对象来获取他们需要的数据。

如果它不是source ，我只会存储我感兴趣的文件的路径或uri，就是这样，我会将所有状态保存在redux中。

这里有什么替代方案？

Answer 1

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

1. 您的操作会发送所有必要信息。 这可以通过将责任移动到操作的调用者来完成，或者操作创建者本身将从外部可能可变对象获取数据，将其标准化并将其传递给reducer。
2. 您的reducer从操作中获取ID，并将其与外部对象组合。 同样，这意味着redux商店拥有所有必要的信息。
3. 您的选择器（或者如果您没有选择器，您的反应组件）接受ID并将其与您的外部对象组合。 如果您将商店保存到localStorage（因为那样您只保留ID，而不是所有信息），这样做效果很好

1的优点是你的reducer是愚蠢和无状态的，获取相关信息的逻辑是在动作创建者中完成的。

2的优点是......好吧，老实说，我想不起太多，如果你找到一个，请告诉我。

3的优点是您的商店仍然相对较小且简单，这有助于服务器端呈现和localStorage持久性之类的事情。 但反过来，它会使你的React组件变得不那么纯净。

---

这里没有灵丹妙药，我担心，您需要根据项目的需求和惯例做出决定。