我有一个包含一些数据的地图数组的状态。 我需要从中选择一个对象。 我可以使用
获得整个数组function mapStateToProps (state) {
return {
allDataSet: state.data
}
}
然后选择需要在组件中放置逻辑的实体。像这样：
(id) => this.props.allDataSet.filter((entity) => entity.id === id)
但不知何故，我认为这样做是错误的，并且违反了所有最佳实践，因为所有选择器逻辑都应该与组件分离。
正是这种情况很简单，但我真正的项目我必须在我的组件中放置复杂的选择器只是为了通过 Id 获取数据......
是否有任何模式或最佳实践可以为此提供解决方案？
【问题讨论】：
标签： javascript reactjs redux react-redux redux-thunk
您应该将 allDataSet 规范化为一个对象，键应该是实体的 id。
function mapStateToProps (state) {
let allDataSet = {};
state.data.forEach((datum) => {
allDataSet[datum.id] = datum;
})
return {
allDataSet
}
}
然后你就可以通过this.props.allDataSet[id]访问所需的实体了
看看这个 http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html
【讨论】：
你可以把你的逻辑保存在mapStateToProps
function mapStateToProps (state) {
return {
entity: state.data.filter((entity) => entity.id === state.selecetedId)
}
}
【讨论】：
如果您希望您的选择器可重复使用，那么您可以在单独的文件中定义它：
export function getSelectedEntity(state) {
return state.data.filter((entity) => entity.id === state.selectedId)
}
然后在你的mapStateToProps()中导入并调用选择器函数：
function mapStateToProps(state) {
return {
entity: getSelectedEntity(state)
};
}
这种模式的一个优点是您可以轻松地为选择器编写单元测试，因为它是一个纯函数并且与您的 React 组件分开。
考虑使用Reselect，这是一个用于创建记忆选择器函数的帮助库。
【讨论】：