當前位置:編程學習大全網 - 編程語言 - redux-react-hook

redux-react-hook

我們知道組件之間的通信可以通過props傳值的方式,但是如果有壹個變量需要供全局使用,那通過這種層層傳遞的方式就未免有點麻煩了。

在介紹這個之前,咱們循序漸進,先從redux開始:

redux React 全家桶中壹只重要的炸雞,比較簡單,基本用法如下:

(1)store的生成 (用於存儲全局狀態)

(2)reducer (根據state和action對state進行更新)

我有哪些數據,我要對這些數據做什麽

(3)dispatch (分發執行)

在組件中使用方式

react中使用redux例子

除了使用redux之外,我們還可以使用 react-redux 提供的 Provider 和 connect 方法

官網解釋:

在組件中要想使用store,則需要使用 connect 連接,connect接受四個參數:

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

①mapStateToProps

mapStateToProps?: (state, ownProps?) => Object

將外部state映射到內部props,接受state作為參數,ownProps參數是可選的,比如我可以通過內部props指定的id來獲取state中某個數組arr[id]的元素。

當state或者ownProps變化時,mapStateToProps都會重新調用

②mapDispatchToProps

mapDispatchToProps?: Object | (dispatch, ownProps?) => Object

作用:將action作為props綁定到組件上

作為connect的第二個參數,如果是個函數類型,則最多只支持兩個參數,且第壹個 壹定是dispatch,並且需要使用dispatch分發action

或者使用 bindActionCreators

③mergeProps

mergeProps?: (stateProps, dispatchProps, ownProps) => Object

如果未定義此參數,則默認使用 { ...ownProps, ...stateProps, ...dispatchProps }

這三個參數分別是 mapStateToProps() , mapDispatchToProps() 和 包裝器組件的props 的結果

④options

options?: Object

僅在react-redux>=6.0的版本支持

官方文檔地址

react-hook是壹種可以將class組件轉為函數式組件的寫法

在 react-hook 中使用 redux 通信就是 redux-react-hook

在子組件中獲取store的方式:直接通過StoreContext

那麽store是如何創建的呢?這時候就要使用createStore

callback的第二個參數用於比較這個參數是否發生變化,來決定是否更新函數

自定義方式創建redux存儲:

參考文章

掘金參考資料

  • 上一篇:編譯proc 出現這樣的錯誤是什麽原因
  • 下一篇:跪求c語言編程問題 文件移位加密與解密 急!
  • copyright 2024編程學習大全網