一 爲什麼使用Redux?
如下圖,組件H需要用到a組件裏的數據,假設不使用Redux,那麼只能通過React的props和state屬性進行逐漸往上分發(H>e>b||c>a)拿到a的數據之後,又要從a組件逐級往下分發(a>b>e>h),如果只是簡單的需求,也能解決問題;但是如果在比較複雜的項目中還這樣,項目維護起來就會很艱難,而且代碼看起來也很臃腫。
但如果使用redux,數據統一存在store裏,通過store進行分發,不管哪個組件都能一鍵分發。
二 如何使用Redux?
redux使用需要理解下圖各個模塊之間的作用和關係。爲了方便描述,我用A、S、R、C分別代表Action、Store、Reducers、Components
首先,S的意思代表商店(表示所有數據的存放池),A的意思爲動作(表示你觸發增刪改查操作數據的行爲),R,很明顯是個名詞,可以理解爲商店的店員(幫助查找數據),C的意思是組件,可以理解爲顧客。那麼這樣就很好理解了,我一個顧客C想去買一個商品(觸發Action動作),就要去商店(觸發S)找這個商品,我找了半天沒找到,於是問了店員,店員就去幫你找到了(觸發R),最後付完錢走出商店,拿到了你想要的商品(state)。
redux運行流程
使用總結:
1.資本家redux要開一個商店,店裏要配店員。(使用createStore(reducer)創建store)
2.我想要買個女朋友,於是去商店了(創建一個action,並把action提交給store)
3.店員熟悉店裏個各種商品,對於顧客一律是有求必應,因爲櫃檯擺動的模型,所以顧客要什麼都是拿出新的給顧客(參數state表示當前商店有的商品,參數action表示顧客提的要求,reducer中和react中的props相似,可以接受state,但不能直接修改,需要進行一個拷貝)
4.購買好了,商店的要更新商品的庫存了。(
store.subscribe(方法名)監聽數據變化並作出修改)
三 如何獲取Redux中的state?
通過store.getState()獲取
四 如何更新Redux中的state?
通過store.subscribe(方法名)進行更新
以上是redux是的入門級別的運用,redux進階使用文章關注公衆號“極致簡文”,拜拜