在 redux 中处理视图逻辑答案

【问题标题】：Handling view logic in redux在 redux 中处理视图逻辑
【发布时间】：2016-11-22 14:45:56
【问题描述】：

我发现我的mapStateToProps 越来越复杂。

例如，跨多个连接的组件，我一直在做这样的事情：

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

问题 #1： 很明显，上面的代码可以用一些条件来保护，因为 activeAssetId 并不总是设置，这会导致上面的抛出错误。

问题 #2： 假设我想在多个组件中获取当前的activeAsset，我现在必须复制上面的代码。

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

如果答案很明显，请原谅，我对 redux 生态系统还很陌生。

【问题讨论】：

见stackoverflow.com/questions/40711359/…。它解释了如何将业务逻辑从视图中分离出来，以及如何将选择器用于记忆化和可维护的代码。

标签： javascript reactjs redux

【解决方案1】：

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

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

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 文件中，或单独的 selectors 文件中。 Reselect 可以帮助您创建记忆标准选择器，但这不是必需的。如果参数没有改变，重新选择选择器将返回相同的数据，这将防止不必要地重新渲染组件。

【讨论】：