日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react-redux的connect示例詳解_React

作者：噢，我明白了 ? 更新時間： 2023-03-28 編程語言

connect簡介：
connect是react-redux兩個api中其中之一，在使用react-redux時起到了為redux中常用的功能實現了和react連接的建立
函數入口，以及需要傳入的參數：

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {}

mapStateToProps:
傳入所有state，返回指定的state數據。

function mapStateToProps(state) {
      return { todos: state.todos }
    }

mapDispatchToProps：
傳入dispatch，返回使用綁定的action方法。

function mapDispatchToProps(dispatch) {
  return bindActionCreators(Object.assign({}, todoActionCreators, counterActionCreators), dispatch)
}

mergeProps：
mergeProps如果不指定，則默認返回 Object.assign({}, ownProps, stateProps, dispatchProps)，顧名思義，mergeProps是合并的意思，將state合并后傳遞給組件

function mergeProps(stateProps, dispatchProps, ownProps) {
  return Object.assign({}, ownProps, {
    todos: stateProps.todos[ownProps.userId],
    addTodo: (text) => dispatchProps.addTodo(ownProps.userId, text)
  })
}

**options：**通過配置項可以更加詳細的定義connect的行為，通常只需要執行默認值。connect函數解析思路“
connect函數是核心既然是函數，那就有返回值，connect()返回值是Connect組件，通俗點理解，使用connect可以把state和dispatch綁定到react組件，使得組件可以訪問到redux的數據。
我們常用的寫法如下：

export default connect(mapStateToProps)(TodoApp)

原文鏈接：https://blog.csdn.net/qq_38980678/article/details/128798799

欄目分類
最近更新