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

现在，我的传奇故事和我的react组件都需要引用一个外部（可能在本示例中未显示）可变对象来在需要时获取所需数据。

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

我在这里有什么选择？

Answer 1

这里没有魔术，我看到了3种主要的动作方式：

您的操作会发送所有必要的信息。可以通过将责任移交给操作的调用者来完成，或者操作创建者本身将从外部可能可变的对象中获取数据，对其进行规范化，然后将其传递给reducer。
您的reducer从操作中获取ID，并将其与外部对象组合。再次，这意味着redux存储具有所有必要的信息。
您的选择器（或者，如果没有选择器，则为react组件）接受ID并将其与外部对象组合。如果您执行诸如将商店持久存储到localStorage之类的事情，这将很好地工作（因为那样的话，您只会持久存储ID，而不是所有信息）

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

2的优点是……好吧，老实说我想不出太多，请问是否找到一个。

3的优点是您的商店保持相对较小和简单，这有助于服务器端渲染和localStorage持久性。但是反过来，它会使您的React组件的纯度降低。

恐怕这里没有灵丹妙药，您将需要根据项目的需求和约定做出决定。

Redux商店外部的Redux状态

1 个答案: