Question

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

这是我的例子。

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

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

例如，我想要一个＆＃34; getter＆＃34;功能告诉我＆＃34;搜索历史记录＆＃34;已经打了10个项目。所以我做的是：

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

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

我将这个功能绑定到另一个＆＃34;真实＆＃34; bindActionCreators的动作：

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

    searchHasMaxHistory
  }, dispatch)
}

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

但真正的问题是，它是否像行动一样将它绑定，但它不会返回一个动作？这样做可能会遇到问题或任何问题吗？并且有一个＆＃34;对＆＃34;做到这一点的解决方案？

Answer 1

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

// 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（）。

Answer 2

查看connect()

的docs

mapStateToProps（state）:( Function）：如果指定，组件将订阅Redux存储更新。任何时候更新，都会调用mapStateToProps

所以你可以像这样编写你的connect()子句：

function mapStateToProps(state) {
  return {
    searchHasMaxHistory: state.search.history === 10
  };
}
connect(mapStateToProps)(YourComponent)

但是，当然，这将计算每次商店变更时的新价值。你可能不希望这样。在这种情况下，您可以定义一个单独的函数，并在每次存储（状态）更改时将您的状态绑定到它。

function isMaxHistoryReached(state) {
  return state.search.history === 10;
}

function mapStateToProps(state) {
  return {
    searchHasMaxHistory: isMaxHistoryReached.bind(YourComponent, state)
  };
}
connect(mapStateToProps)(YourComponent)

现在仍然在每次状态更改时在内存中创建一个新函数，但它不会调用它。

Answer 3

我看到你的目标是：

我想拥有可以获得当前状态的函数一些逻辑，而不必通过当前状态函数的参数。

但bindActionCreators(actionCreators, dispatch)用于其他目的。

它会通过dispatch调用包裹您的所有动作创建者，以便可以直接调用它们。

我们以一种黑客的方式做事，而不是为什么我们不使用原始的store对象来获取状态。

为您store的{{1}}对象创建一个getter。

createStore

现在位于 state-getter ：

中

import { createStore } from 'redux'
import reducer from './reducer';

let store = {};

export default function storeCreator () {
    // ...do things

    store = createStore(reducer);

    // ...do more things

    return store;  
}

export function getStore() {
    return store;
}

Redux的行动中的吸气者 - React Native

3 个答案: