首先說下我對redux 的理解吧,第一印象很重要就像妹紙一樣.
一句話來說他就是一個 js 的應用狀態容器.
說長點就是當你的應用足夠復雜,交互足夠多的時候,你不方便管理你的 state, 那么交給 redux 吧,他是一個單向數據流,高效且清晰.
那么什么時候使用 redux呢,有一句話叫當你沒有想到redux 的時候,那么你真的可能並不需要它.
下面就簡單說下一些基本的概念.
Action:中文意思,動作,沒錯,在 redux 里也是這么個意思,指用戶的一個動作,放在 native 里就是 View 這個視圖接受了用戶的一個操作,比如點擊,放在 RN 里就是一個 component 接受了一個交互操作,產生的一個 action,action 其實就是一個js對象(js對象其實就是鍵值對),有一個必須的字段type, 用來唯一標識你的會這個 action 類型,其他還有一些合適的數據,數據要盡可能少,下面看一下 action 的樣子.
是不是好奇怎么有個 dispatch 參數,這個 dispatch 哪里來的呢,他是在 component 中有個 bindActionCreactor 函數綁定 dispatch 到 action 上,上面 mock 了一個用戶數據,這里用了異步的操作,首先定義了一個 doLogin的函數 這也是一個 ActionCreactor,先 dispatchy一個 isLogining 的操作,成功了則進行 isSuccess 的 action, 傳入 user,失敗了則什么都不傳.這是一個異步操作,中間模擬了 fetch 百度的操作,想使用異步函數, redux 里就要用到一個叫做中間件的東西,下面會講
Store: 起名字是有講究的,沒錯,他就是一個倉庫,所有的數據 state 樹都在 store 里,而且無論你的應用有多大只有一個 store, 在入口里傳遞給 store,store 有幾個比較重要的作用,首先 store.dispatch(action),所有的動作都是由他發起的,因為在創建store 的時候會傳入 reducer, 所有一旦 dispatch 這個 action,reducer 立刻就會執行這個 action, 現在你只要記得 reducer 這個東西就行了他就是一個函數而已,下面會講到
上圖是 store 第一次出現的地方,這也是一個程序 js 部分的真正入口,有些人會問 provider 是什么,他是一個 Facebook 寫的東西,用 provider 包裹着你的 APP,你就可以在你的 APP 里取到state,這里的 store 是通過這個 configuerStore()獲取的,他真正的創建的地方在這里:
如果沒看過 redux 的肯定一臉懵逼, createstore 是什么鬼 applyMiddleware,thunkMiddleware 又是什么東西,我其實當時也有點蒙,其實知識這東西永遠都是學不完的,你會的比別人多點,別人有一天也會超過你的,所以知識改變命運這種說法是並不正確的,知識在60-70年代可以改變命運,這句話也是李嘉誠說的確實符合,但是現在獲取知識的途徑太多了,只要你想學你永遠都學不完,然而這並沒有什么卵用,對於你的命運,只是你工作的可以好一點而已,每月可以多拿一千兩千塊錢,你還是娶不到媳婦,買不起房.真正改變命運的不是知識,而是智慧,有一千種成功的方式,就看你有沒有動腦子去想,有人想過但被各種困難阻礙,這種屬於嘴上的智慧.總之扯的太遠了.
createstore()這是一個創建 store 的方法,但是光創建不夠啊,我們要給他配置一些東西,比如可以讓他發起異步 action, 這就用到中間件 thunkMidlleware,applyMiddleware 就是創建帶有中間件的 store, 下面大家都能看懂,傳入一個 reducer, 那么 loginIn 是什么啊,這就要講到 reducer 了, initalState 就是一個初始的 state, 可傳可不傳,如果你的服務器有返回初始狀態的話也可以傳進去,下面就是大名鼎鼎的 reducer 了
Reducer:簡單的說 reducer 就是一個函數,他在創建store 的時候通過作為參數的方式傳入,所以store 只要調用dispatch 方法就會自動觸發 reducer 函數,那么 reducer 函數是干嘛的呢,reducer 負責接受一個 previousState,和一個 action,返回一個新的 state,store 把這個 state 的更新告訴 component 就會觸發UI 的重新渲染,那么下面看看 reducer 到底什么樣子吧
哈哈,是不是和我描述的一樣,接受一個初始的 state, 返回一個新的 state, 忘了一點, reducer 可以有很多個的,一個應用太大的時候,雖然 store 只有一個,但是 reducer 可以拆分,下面就用到一個函數用來合並多個 reducer
就是這個 combineReducers ,記住用 reducer 的時候一定記得要用下面的 userReducer哦,尤其是在下面的 select 函數里
那么這個 select 函數是干嘛的呢,它的作用就是將 store 的狀態綁定到當前組件的 props 上, store 每個時刻都對應着一種狀態,這種狀態也對應着相應的 UI,store.getState()可以獲取到當前的狀態,一旦狀態發生改變就會觸發 UI 渲染,下面這個 connet()函數就表示 LoginPage 對 store 的狀態感興趣,意思就是 store 變化的時候這個頁面可以跟着他一起變化
總結一下:單一數據源,只有一個 store,store 是 action 的分發中心,所有 state 的改變必須要由 store.dispatch()來觸發,只有一個 state 樹;
可以有多個 reducer,由 combineReducers 組合起來;
唯一去改變 state 的方式就是發出一個 action 到 reducer;
利用 bindActionCreactor()函數去自動綁定 action 到 dispatch() 函數
大概就是這樣,共勉