在处理查看逻辑处理

我发现我的mapStateToProps复杂性在增加。在处理查看逻辑处理

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

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

问题1： 这是相当明显的是，上面的代码可以用一些条件语句，因为activeAssetId把守并不总是会导致上述抛出错误。

问题2： 假设我想获得在多个组件现在我不得不重复上面的代码当前activeAsset。

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

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

来源

2016-11-22 dipole_moment

请参阅http://stackoverflow.com/questions/40711359/changing-the-layout-of-a-component-depending-on-redux-state/40711713#40711713。它解释了将业务逻辑从视图中分离出来以及将选择器用于存储和维护的代码。 –

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

在你的情况，这可能是你的选择：

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) 
    } 
}

您可以为每一个导出的数据选择器，并将其存储在相关的减速器的文件，或单独的selectors文件。 Reselect可以帮助您创建memoized标准选择器，但不是必需的。如果参数没有改变，重新选择器将返回相同的数据，这将防止不必要地重新渲染组件。

来源

2016-11-22 15:04:06

在处理查看逻辑处理

回答

相关问题