如何？使用参数创建 Redux 选择器

Question

我有一个带有一些数据的映射数组的状态。我需要从中 select 一个对象。我可以使用

获取整个数组

function mapStateToProps (state) {
  return {
    allDataSet: state.data
  }
}

然后 select 实体需要在组件中放置逻辑。像这样：

(id) => this.props.allDataSet.filter((entity) => entity.id === id)

但不知何故我认为这样做是错误的并且违反了所有最佳实践，因为所有 selector 逻辑都应该与组件分离。
这个案例确实很简单，但我的实际项目我不得不在我的组件中放置复杂的 selectors 只是为了通过 Id 获取数据...... 是否有任何模式或最佳实践可以为此提供解决方案？

Answer 1

你可以把你的逻辑放在里面mapStateToProps

function mapStateToProps (state) {
  return {
    entity: state.data.filter((entity) => entity.id === state.selecetedId)
  }
}

Answer 2

您应该将 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

Answer 3

如果您希望您的选择器可重复使用，那么您可以在单独的文件中定义它：

export function getSelectedEntity(state) {
  return state.data.filter((entity) => entity.id === state.selectedId)
}

然后在你的 mapStateToProps():

中导入并调用选择器函数

function mapStateToProps(state) {
  return {
    entity: getSelectedEntity(state)
  };
}

此模式的一个优点是您可以轻松地为选择器编写单元测试，因为它是一个纯函数并且与您的 React 组件分开。

考虑使用 Reselect，这是一个用于创建记忆化选择器函数的辅助库。

如何？使用参数创建 Redux 选择器

How to? Creating Redux selectors with arguments

javascript

reactjs

redux

react-redux

redux-thunk