Redux动作中的Ge​​tters-React Native

Question

我想拥有一些函数，这些函数可以获取当前状态以对其进行一些逻辑处理，而不必通过参数将当前状态传递给函数。

这是我的例子。

在我的操作文件中，我有：

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的“真实”动作绑定在一起：

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

    searchHasMaxHistory
  }, dispatch)
} 

因此，我可以像执行任何常规操作一样使用它。它运作良好，并且完全符合我的要求。

但是真正的问题是，是否像动作一样将其绑定为反模式却没有返回动作？我这样做会遇到问题吗？是否有“正确”的解决方案？

Answer 1

为此，您应该通过函数将“getter”（在文档中描述为“选择器” ）绑定到您的组件mapStateToProps。

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

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