Javascript 在redux中处理视图逻辑

我发现我的

mapstatetops

的复杂性在增加

例如，在多个连接的组件之间，我一直在做类似的事情：

const mapStateToProps = (state) => {
  return {
    activeAsset: state.assets.byId[state.assets.activeAssetId].attributes
  }
}

问题#1: 很明显，上面的代码可以使用一些条件进行保护，因为

activeAssetId

并不总是被设置，这将导致上面抛出一个错误

问题#2: 假设我想在多个组件中获得当前的

activeAsset

，我现在必须复制上面的代码

我听说过，但我不完全确定这是否是正确的选择，因为它似乎专门用于记忆功能

---

如果答案很明显，请原谅，我是redux生态系统的新手。

安全的解决方案是使用选择器。选择器是可重用的函数，它知道存储中状态的形状，并可以生成派生数据

在您的情况下，这可以是您的选择器：

const getAssetAttributes = ({ assets }) =>  (assets.byId[state.assets.activeAssetId] && assets.byId[state.assets.activeAssetId].attributes) || null; // if the asset exists and has attributes return it, if not return null

用法：

const mapStateToProps = (state) => {
  return {
    activeAsset: getAssetAttributes(state)
  }
}

您可以为每个派生数据创建选择器，并将其存储在相关的reducer文件中，或存储在单独的

选择器

文件中。可以帮助您创建记忆标准选择器，但这不是必需的。如果参数没有更改，重新选择选择器将返回相同的数据，这将防止不必要地重新选择组件。

请参见此。它解释了如何从视图中分离业务逻辑，以及如何使用选择器来存储和维护代码。