React的最後一篇基礎課出來啦,前三節三金幫大家放到了專輯裡,大家喜歡的可以去看喲。
Redux 是一個獨立的 JavaScript 狀態管理庫。曾經有人說過這樣一句話。
"如果你不知道是否需要 Redux,那就是不需要它。"
Redux 的創造者 Dan Abramov 又補充了一句。
"只有遇到 React 實在解決不了的問題,你才需要 Redux 。"
首先,我們要理解 Redux 幾個核心概念與它們之間的關係:
○store
○state
○action
○reducer
StoreStore就是保存數據的地方,你可以把它看成一個容器。整個應用只能有一個Store。
Redux提供createStore這個函數,用來生成Store:
上面代碼中,createStore函數接受另一個函數作為參數,返回新生成的 Store 對象。
stateStore對象包含所有數據。如果想得到某個時點的數據,就要對Store生成快照。
這種時點的數據集合,就叫做State。
當前時刻的State,可以通過store.getState()拿到:
Redux 規定, 一個 State 對應一個 View。只要 State 相同,View 就相同。你知道 State,就知道 View 是什麼樣,反之亦然。
state是只讀的。
這裡需要注意的是,為了保證數據狀態的可維護和測試,不推薦直接修改state中的原數據。
什麼是純函數?
1、相同的輸入永遠返回相同的輸出
2、不修改函數的輸入值
3、不依賴外部環境狀態
4、無任何副作用
使用純函數的好處?
1、便於測試
2、有利重構
ActionState 的變化,會導致 View 的變化。但是,用戶接觸不到 State,只能接觸到 View。
所以,State 的變化必須是 View 導致的。Action 就是 View 發出的通知,表示 State 應該要發生變化了。
Action 是一個對象。其中的type屬性是必須的,表示 Action 的名稱。
其他屬性可以自由設置:
Action CreatorView 要發送多少種消息,就會有多少種 Action。
如果都手寫,會很麻煩。
可以定義一個函數來生成 Action,這個函數就叫 Action Creator。
store.dispatch()store.dispatch()是 View 發出 Action 的唯一方法。
結合 Action Creator,這段代碼可以改寫如下。
store.dispatch(addTodo('LearnRedux'));
ReducerStore 收到 Action 以後,必須給出一個新的 State,這樣 View 才會發生變化。
這種 State 的計算過程就叫做 Reducer。
Reducer 是一個函數,它接受 Action 和當前 State 作為參數,返回一個新的 State:
整個應用的初始狀態,可以作為 State 的默認值。
下面是一個實際的例子:
store.subscribe()Store 允許使用store.su-bscribe方法設置監聽函數。
一旦 State 發生變化,就自動執行這個函數。
顯然,只要把 View 的更新函數(對於 React 項目,就是組件的render方法或setState方法)放入listen,就會實現 View 的自動渲染。
store.subscribe方法返回一個函數,調用這個函數就可以解除監聽:
Reducer 函數負責生成 State。
由於整個應用只有一個 State 對象,包含所有數據,對於大型應用來說。
這個 State 必然十分龐大,導致 Reducer 函數也十分龐大。
請看下面的例子:
上面代碼中,三種 Action 分別改變 State 的三個屬性:
ADD_CHAT:chatLog屬性
CHANGE_STATUS:statusMessage屬性
CHANGE_USERNAME:userName屬性這三個屬性之間沒有聯繫。
這提示我們可以把 Reducer 函數拆分。
不同的函數負責處理不同屬性,最終把它們合併成一個大的 Reducer 即可。
Redux 提供了一個combineReducers方法,用於 Reducer 的拆分。
你只要定義各個子 Reducer 函數,然後用這個方法,將它們合成一個大的 Reducer:
這種寫法有一個前提,就是 State 的屬性名必須與子 Reducer 同名。
如果不同名,就要採用下面的寫法:
你可以把所有子 Reducer 放在一個文件裡面,然後統一引入:
然後,Store 自動調用 Reducer,並且傳入兩個參數:
當前 State 和收到的 Action。
Reducer 會返回新的 State 。
State 一旦有變化,Store 就會調用監聽函數。
listener可以通過store.getState()得到當前狀態。
如果使用的是 React,這時可以觸發重新渲染 View。
Provider 組件:
想在 React 中使用 Redux ,還需要通過 react-redux 提供的 Provider 容器組件把 store 注入到應用中
connect 方法:
有了 connect 方法,我們不需要通過 props 一層層的進行傳遞, 類似路由中的 withRouter
我們只需要在用到 store 的組件中,通過 react-redux 提供的 connect 方法。
把 store 注入到組件的 props 中就可以使用了
connect 方法的第一個參數是一個函數
該函數的第一個參數就是 store 中的 state : store.getState()
該函數的返回值將被解構賦值給 props : this.props.items
redux-chunk
這是一個把同步 dispatch 變成異步 dispatch 的中間件。
安裝:
到這裡,關於React的基礎篇就全部更新完啦~
接下來我們會製作一系列關於【圖形選擇】的乾貨文章,非常適合需要夯實前端基礎的同學!
對於前端基礎較高的同學,我們也會為大家分享優質、深入的前端領域乾貨
還有非常實用的小道具推薦,還有每周五必更的【三金叨叨叨】
更多好文都在【開課吧前端團隊】
再次感謝各位小夥伴的支持~