Flutter 狀態(tài)管理redux 方案理解與實(shí)踐
redux 數(shù)據(jù)管理方式來(lái)自 react 尉咕，React 的數(shù)據(jù)單向流通的叠蝇，很多時(shí)候需要共享數(shù)據(jù)的時(shí)候就比較麻煩，需要不斷地變量提升年缎，也就導(dǎo)致數(shù)據(jù)上溯會(huì)非常的混亂悔捶。解決辦法之一就是redux , 進(jìn)行全局統(tǒng)一的數(shù)據(jù)管理，并且通過(guò)State 的更新驅(qū)動(dòng)虛擬dom 更新单芜，再經(jīng)過(guò)diff 算法結(jié)果驅(qū)動(dòng)真實(shí)dom 的更新蜕该。優(yōu)勢(shì)是數(shù)據(jù)的結(jié)構(gòu)清晰,各個(gè)組件之間的數(shù)據(jù)共享。但是真的是挺繁瑣的洲鸠，初學(xué)者也不方便理解堂淡。
1.這是redux 數(shù)據(jù)流程圖，與一些關(guān)鍵組件扒腕。
一些基本概念的梳理：
Store：這是數(shù)據(jù)存儲(chǔ)倉(cāng)庫(kù)淤齐，保存所有的數(shù)據(jù)。其實(shí)在 react 里面是可以有多個(gè) store 的袜匿，我并沒(méi)有研究 ? ? ? ? flutter 里面是否可以存在多個(gè)更啄，但是正常來(lái)講一個(gè)已經(jīng)足夠了。并且建議一個(gè)應(yīng)用只配置一個(gè)Store 居灯。
Action: ?本質(zhì)就是一個(gè)個(gè)操作祭务，因?yàn)閞edux 是不允許直接操作 Store 里面的state 的落竹，Action 就相當(dāng)于一個(gè)的操作Store 請(qǐng)求文兢，。
reducer: 這是一個(gè)真真修改Store 里面State 的純函數(shù)窟赏。只有兩個(gè)參數(shù) 一個(gè)是當(dāng)前的State ,另一個(gè)是Action
Middleware: 中間件岩灭，主要是用來(lái)發(fā)起異步Action的拌倍，一般在這發(fā)起API ?請(qǐng)求，log 調(diào)試。 常用庫(kù)redux_thunk
Redux 接入實(shí)踐：
? ?在接入redux 時(shí)柱恤，我們需要接入一些其他的庫(kù)更方便的使用redux 数初，如：flutter-redux，redux_thunk等梗顺。
?flutter-redux?具備除了redux的所有能力之外泡孩，針對(duì)UI層專門(mén)提供了StoreProvider、StoreConnector寺谤、StoreBuilder等相應(yīng)的操作組件仑鸥，這大大簡(jiǎn)化了我們?cè)趂lutter中使用redux的成本。redux_thunk 可以讓我們像發(fā)起普通Action一樣去發(fā)起 異步Action.后面我們會(huì)介紹 這些關(guān)鍵Widget 的作用变屁。
Step1 創(chuàng)建一個(gè)全局的Store 并接入到App 中眼俊，創(chuàng)建 Store 時(shí) middleware 參數(shù)需要注意一下，當(dāng)我們引入redux_thunk 這在數(shù)組中直接 加入thunkMiddleware 就好了粟关。 StoreProvider?是flutter_redux 提供的UI widget 疮胖，包裹MaterialApp根組件，在程序入口綁定好創(chuàng)建的全局的store 誊役。
Step2 創(chuàng)建并初始化一個(gè)全局的State 用來(lái)保存全局的數(shù)據(jù)获列。Store 創(chuàng)建的時(shí)候就傳入了一個(gè) AppState 的泛型。以后存取數(shù)據(jù)都需要用到這個(gè)State 實(shí)體蛔垢。
Step3 創(chuàng)建Action ,比如我需要調(diào)用查詢單詞的接口击孩，這是一個(gè)異步的Action ?，我們就需要用到Middleware 了鹏漆。那么我們先創(chuàng)建一個(gè)?Middleware巩梢。ThunkAction 類(lèi)型是一個(gè) Store 參數(shù)的異步函數(shù)，我們要傳遞參數(shù)只能像如圖調(diào)用艺玲。第一ThunkAction 是真正API 請(qǐng)求括蝠，第二 ThunkAction 是一個(gè)測(cè)試。redux_thunk 會(huì)自己把ThunkAction 放入到中間件饭聚，我們只需要當(dāng)普通Action 調(diào)用就行了忌警。Step3_圖2 就是定義的普通的Action
Step4 ?發(fā)起Action , 去執(zhí)行 reducer , ThunkAction 與普通action 執(zhí)行時(shí)一樣的，都是dispatch 一個(gè)action 出去秒梳。不過(guò)在發(fā)起 Action 前 我們需要先 connect 一下法绵，把當(dāng)前組件跟Store 綁定起來(lái)。StoreConnector 組件就是用來(lái)關(guān)聯(lián)Store 與當(dāng)前組件酪碘，當(dāng)Store 發(fā)生改變的時(shí)候朋譬，接受 新的 State 。OnInit ?內(nèi)可以執(zhí)行初始化操作兴垦， converter 方法轉(zhuǎn)換成 viewMode, builder 兩個(gè)參數(shù)徙赢，一個(gè)是組件的上下文字柠，一個(gè)是State 在這邊把state 轉(zhuǎn)化成UI 。var store = StoreProvider.of<AppState>(context);用來(lái)獲取 當(dāng)前組件綁定的Store 狡赐。其實(shí) 一般來(lái)講全局就一個(gè)store 對(duì)象窑业，可以 保存在全局配置中，也就不需要每次用的時(shí)候都獲取了阴汇。
Step5 創(chuàng)建 Reducer 数冬，reducer 是純函數(shù)节槐，只有兩個(gè)參數(shù) :當(dāng)前的的State 和 執(zhí)行的action 搀庶，并根據(jù)action 來(lái)修改State .在這里不應(yīng)該做其他的操作。這個(gè)沒(méi)有 react ?{...state} 解包方式铜异，我這邊沒(méi)有仔細(xì)寫(xiě)哥倔，讀者可以根據(jù)需要在 MineState 中寫(xiě)一個(gè) 方法，可以優(yōu)雅的操作state.
Step6 使用Store State揍庄。在connector 中就已經(jīng)可以拿到Store 對(duì)象咆蒿，我們就可以愉快的使用Store State?
總結(jié)：Redux ?是挺繁瑣的，但是基本結(jié)構(gòu)整理清晰后蚂子，后面的套路都一樣的沃测，一些基礎(chǔ)結(jié)構(gòu)搭建好，再經(jīng)過(guò)打磨后食茎，用起來(lái)還是很方便的蒂破。不過(guò)初學(xué)者要好好整理一下redux 的數(shù)據(jù)流向，弄清楚一些 flutter_redux 的基礎(chǔ)組件的作用别渔。
寫(xiě)了一個(gè)demo 供大家參考一下：github 地址
