如何在react-native 中優雅的使用 redux

標籤：使用者   store   是什麼   建立   意思   image   高效   ima   資料   

首先說下我對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() 函數

 

大概就是這樣,共勉

 

如何在react-native 中優雅的使用 redux