redux - 使用 reselect createSelector 在 redux 存储中选择相互依赖的数据

Question

所以，我使用 redux , 和 reselect工具 createSelector在 mapStateToProps 中记住我的选择器，而且很棒。

现在，我的商店中有一些标准化数据，以及一个需要来自商店的相互依赖数据的容器。

我正在这样做，目前，它有效:

const getItemId = props => parseInt(props.match.params.itemId, 10)

const containerSelector = createSelector(getItemId, itemId =>
  createSelector(
    [getUser, getItem(itemId)],
    (user, item) =>
      createSelector(
        [
          getFoo(item.fooId),
          getBar(item.barId)
        ],
        (foo, bar) => ({ user, item, foo, bar })
      )
  )
)

const mapStateToProps = (state, ownProps) =>
  containerSelector(ownProps)(state)(state)

export default connect(mapStateToProps)(Container)

问题:有没有更好的方法来做到这一点？

更具可读性？

更好的实践？

性能更高？ (这性能好吗？)

编辑:

感谢 Tho Vu 的回答，我可以让它变得更简单和内存，就像这样:

import { getUser, getItemById, getFooById } from 'selectors'

// Note: getStuffById are selector factories like: 
//   const getStuffById = id => state => state.stuff.objects[id] 

const itemIdSelector = (_, props) => parseInt(props.match.params.itemId, 10)

const itemSelector = (state, props) => {
   const itemId = itemIdSelector(state, props)
   return getItemById(itemId)(state)
}

const fooSelector = (state, props) => {
   const item = itemSelector(state, props)
   return item ? getFooById(item.fooId)(state) : null
}

const mapStateToProps = createStructuredSelector({ 
  user: getUser, 
  itemId: itemIdSelector, 
  item: itemSelector,
  foo: fooSelector
})

但我仍然对此感到困惑？或者也许已经好了？

Answer 1

来自 reselect 的文档:

When a selector is connected to a component with connect, the component props are passed as the second argument to the selector

所以第一个 createSelector用于获取 itemId 的层实际上是不必要的，您可以将其替换为:

const getItem = (state, props) => {
   const itemId = parseInt(props.match.params.itemId, 10)
   return getItem(itemId)
}

其次， createSelector具有以下属性:

Selectors created with createSelector have a cache size of 1. This means they always recalculate when the value of an input-selector changes, as a selector only stores the preceding value of each input-selector.

这意味着您的自定义选择器将随着 user 的每次更改而重新计算, itemId , item , foo , bar .其余的输入选择器很难说，但我看不出 user 之间有任何关系。和其他人。因此，您应该为 user 创建一个单独的选择器。 .

此外， createSelector 的目的是创建一个具有可保留内存的选择器，因此以您的方式嵌套它们将导致每次外部选择器重新计算时都重新创建内部选择器。

我通常做的是像这样把它们弄平:

const getItem = (state, props) => {
   const itemId = parseInt(props.match.params.itemId, 10)
   return getItem(itemId)
}

const userSelector = createSelector(getUser, user => user)
const itemSelector = createSelector(getItem, item => item)

foo和 bar更困难，因为在您的代码中，选择器会查找 item 中的更改, item.fooId和 foo太重算了。我们仍然需要嵌套选择器，但要分隔 foo和 bar是必须的:

const fooFromItemSelector = createSelector(itemSelector, item => getFoo(item.fooId))
const fooSelector = createSelector(fooFromItemSelector, foo => foo)

bar 也是如此.

最后，您需要将它们组合在一起以创建 containerSelector :

import { createStructuredSelector } from 'reselect'

const containerSelector = createStructuredSelector({
    user: userSelector,
    item: itemSelector,
    foo: fooSelector,
    bar: barSelector
})