在 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中。

那么，我还有哪些选择？

- Federkun

Answer 1

这里没有什么神奇的，我看到三个主要行动途径：

1. 您的操作发送了所有必要的信息。这可以通过将责任转移给操作的调用者来完成，或者操作创建者本身会从外部潜在可变对象中获取数据，对其进行标准化，并将其传递给reducer。
2. 您的reducer从操作中获取ID，并将其与外部对象组合。同样，这意味着redux store具有所有必要的信息。
3. 您的selector（或如果您没有selector，则是您的react组件）接受ID并将其与您的外部对象结合使用。如果您像将store持久化到localStorage中一样执行操作，这将很有效（因为这样您只需持久化ID而不是所有信息）

第1种方法的优点是您的reducer是愚蠢且无状态的，获取相关信息的逻辑在action creator中完成。

第2种方法的优点是...好吧，我实在想不出太多了，如果您发现了其他优点，请告诉我。

第3种方法的优点是您的store保持相对较小和简单，这有助于诸如服务器端渲染和localStorage持久化之类的事情。但反过来，它使您的React组件不那么纯净。

---

恐怕这里没有万能的解决方案，您需要根据您的项目需求和惯例做出决策。

- Madara's Ghost