Redux入門

 

 

一 爲什麼使用Redux?

 

如下圖,組件H需要用到a組件裏的數據,假設不使用Redux,那麼只能通過React的props和state屬性進行逐漸往上分發(H>e>b||c>a)拿到a的數據之後,又要從a組件逐級往下分發(a>b>e>h),如果只是簡單的需求,也能解決問題;但是如果在比較複雜的項目中還這樣,項目維護起來就會很艱難,而且代碼看起來也很臃腫。

image.png

但如果使用redux,數據統一存在store裏,通過store進行分發,不管哪個組件都能一鍵分發。

 

image.png

 

二 如何使用Redux?

 

redux使用需要理解下圖各個模塊之間的作用和關係。爲了方便描述,我用A、S、R、C分別代表Action、Store、Reducers、Components

首先,S的意思代表商店(表示所有數據的存放池),A的意思爲動作(表示你觸發增刪改查操作數據的行爲),R,很明顯是個名詞,可以理解爲商店的店員(幫助查找數據),C的意思是組件,可以理解爲顧客。那麼這樣就很好理解了,我一個顧客C想去買一個商品(觸發Action動作),就要去商店(觸發S)找這個商品,我找了半天沒找到,於是問了店員,店員就去幫你找到了(觸發R),最後付完錢走出商店,拿到了你想要的商品(state)。

image.png

                        redux運行流程

使用總結:

1.資本家redux要開一個商店,店裏要配店員。(使用createStore(reducer)創建store)

image.png

2.我想要買個女朋友,於是去商店了(創建一個action,並把action提交給store)

image.png

3.店員熟悉店裏個各種商品,對於顧客一律是有求必應,因爲櫃檯擺動的模型,所以顧客要什麼都是拿出新的給顧客(參數state表示當前商店有的商品,參數action表示顧客提的要求,reducer中和react中的props相似,可以接受state,但不能直接修改,需要進行一個拷貝)

image.png

4.購買好了,商店的要更新商品的庫存了。(

store.subscribe(方法名)監聽數據變化並作出修改)

image.png

 

三  如何獲取Redux中的state?

 

通過store.getState()獲取

image.png

 

 

四 如何更新Redux中的state?

通過store.subscribe(方法名)進行更新

image.png

 

 

 

 

以上是redux是的入門級別的運用,redux進階使用文章關注公衆號“極致簡文”,拜拜

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章