javascript - Redux Action 中的 Getters - React Native

Question

我希望有一些函数可以获取当前状态来用它做一些逻辑，而不必通过参数将当前状态传递给函数。

这是我的例子。

在我的 Action 文件中，我有:

export const addToSearchHistory = (newSearch) => ({type: ADD_TO_SEARCH_HISTORY, newSearch})
export const addToCardHistory = (newCard) => ({type: ADD_TO_CARD_HISTORY, newCard})

例如，我想要一个“getter”函数，告诉我“搜索历史”是否已经达到 10 个项目。所以我所做的是:

export const searchHasMaxHistory = () => (dispatch, getState) => {
  var state = getState()
      search = state.search

  return search.history == 10 ? true : false
}

然后我使用 bindActionCreators 将此函数与其他“真实”操作绑定(bind):

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
    addToSearchHistory,
    addToCardHistory,

    searchHasMaxHistory
  }, dispatch)
} 

所以我可以像任何正常操作一样访问。它运作良好，完全符合我的要求。

但真正的问题是，将它像一个 Action 一样绑定(bind)但它不返回一个 Action 是不是反模式？我这样做会遇到问题吗？是否有“正确”的解决方案来做到这一点？

Answer 1

为此，您应该通过 mapStateToProps 函数将您的“getter”(在 the docs 中描述为“选择器”)绑定(bind)到您的组件。

// the selector (probably in your reducer file)

export const searchHasMaxHistory = state => {
  return state.search.history == 10 ? true : false
}

// in your component

const mapStateToProps = (state) => {
  return {
    hasHitMaxHistory: searchHasMaxHistory(state)
  }
}

const mapDispatchToProps = ... // keep the same, remove your "getter"

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(YourComponent)

这种方法对我来说更有意义，因为您的组件的新属性将按预期运行，并在返回值更改时触发 render()。