在 React Native 要做狀態(tài)管理通常都是使用 Redux，這種方式非常好。幸運(yùn)的是，在 Flutter 也支持使用 Redux。

flutter_redux 是一個(gè)支持在 Flutter 里使用 Redux 的庫(kù)，但并不是使用 JS 版本的 Redux，而是使用 dart_redux，這是一個(gè)在 dart 上的 Redux 實(shí)現(xiàn)。

Redux 的基礎(chǔ)知識(shí)就不多說了，在這里主要介紹如何在 Flutter 里使用 Redux 管理應(yīng)用的數(shù)據(jù)狀態(tài)。

先安裝依賴：

dependencies: redux: ^3.0.0 flutter_redux: ^0.5.2 

在 Flutter Redux 里有一個(gè)必要知道的概念：

• StoreProvider - 一個(gè)組件，它會(huì)將給定的 Redux Store 傳遞給它的所有子組件。
• StoreBuilder - 一個(gè)子 Widget 組件，StoreProvider 它從 Action 中獲取 Store 并將其傳遞給 Widget builder 函數(shù)。
• StoreConnector - 從最近的 StoreProvider 祖先獲取 Store 的子 Widget，使用給定的函數(shù)將其轉(zhuǎn)換 Store 為 Action，并將其傳遞給函數(shù)。只要 Store 發(fā)出更改事件，Widget 就會(huì)自動(dòng)重建。無需管理訂閱！

Flutter Redux 的概念就像是 react-redux 一樣。

下面來看一個(gè)簡(jiǎn)單的示例。

import 'package:flutter/material.dart'; import 'package:redux/redux.dart'; import 'package:flutter_redux/flutter_redux.dart';void main() { runApp(new FlutterReduxApp()); }// 定義個(gè) Types 枚舉 enum Types { Increment }// Reducer 處理 int Reducer(int state, action) { if (action == Types.Increment) { return state + 1; }return state; }// 創(chuàng)建一個(gè) Action 類 class Action { dynamic store; dynamic dispatch; Action(store) { this.store = store; this.dispatch = store.dispatch; }// 某個(gè) Action increment() { dispatch(Types.Increment); } }class FlutterReduxApp extends StatelessWidget { // 創(chuàng)建一個(gè) store Action action; final store = new Store(Reducer, initialState: 0);@override Widget build(BuildContext context) { // 初始化 action if (action == null) { action = new Action(store); }return new MaterialApp( // 創(chuàng)建一個(gè) Provider home: new StoreProvider( store: this.store, child: new Scaffold( body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: [ new Text('You have pushed the button this many times:'), // 連接器，連接之后可以獲取數(shù)據(jù)，在 builder 里渲染內(nèi)容 new StoreConnector<int, String>( converter: (store) => store.state.toString(), builder: (context, count) => new Text(count), ) ], ), ), floatingActionButton: new FloatingActionButton( onPressed: action.increment, // action child: new Icon(Icons.add), ), ), ), ); } } 

在需要改變狀態(tài)的組件里使用 StoreConnector 連接數(shù)據(jù)（避免對(duì)整個(gè)內(nèi)容做一次性的連接，導(dǎo)致整個(gè)渲染）。

在這里 Store 是一個(gè)泛型類，在初始化時(shí)請(qǐng)給它一個(gè)類型，否則就是 Store<int>。很多時(shí)候 State 是一個(gè)復(fù)雜的結(jié)構(gòu)，并不是一個(gè)簡(jiǎn)單的 int 類型，那么如何適配？

// Reducer 處理 State reducer(State state, action) { if (action == Types.Increment) { state.count++; return state.newState(state); }return state; }class State { List<String> list; String name; int count; State(this.list, this.name, this.count); // 返回一個(gè)新的實(shí)例 newState(State obj) { this.name = obj.name; this.list = obj.list; this.count = obj.count; return new State(obj.list, obj.name, obj.count); } }// 創(chuàng)建一個(gè) store final store = new Store<State>(reducer, initialState: new State([], 'abc', 0));// 連接器，連接之后可以獲取數(shù)據(jù)，在 builder 里渲染內(nèi)容 new StoreConnector<State, String>( converter: (store) => store.state.count.toString(), builder: (context, count) => new Text(count), ), 

StoreConnector 里的 converter 一定要是返回 String 嗎？目前為止是的，因?yàn)榇蠖鄶?shù)的在 Widget 上都是使用字符串渲染。

此外，可以使用 StoreConnector 對(duì)某個(gè)組件進(jìn)行數(shù)據(jù)的連接，對(duì)于不變化的組件那就沒必要連接了。

在 Action 初始了一個(gè) store 和 dispatch，這樣就可以在方法里直接引用 store 和 dispatch。

// 創(chuàng)建一個(gè) Action 類 class Action { Store<State> store; dynamic dispatch; Action(store) { this.store = store; this.dispatch = store.dispatch; }// 某個(gè) Action increment() { dispatch(Types.Increment); } } 

中間件

中間件是一個(gè)非常有用的東西，它可以在 Reducer 操作之前做一些攔截或者記錄工作。

Store 的第三個(gè)參數(shù)是一個(gè)接受中間件的參數(shù)，我們可以通過下面的定義中間件方式，為 Store 添加中間件。

loggingMiddleware<T>(Store<T> store, action, NextDispatcher next) { print('${new DateTime.now()}: $action'); next(action); }final store = new Store<int>( counterReducer, initialState: 0, middleware: [loggingMiddleware], ); 

異步操作

在 action 里使用 async 即可，在等待異步操作完成后再調(diào)用 dispatch。

// 某個(gè) Action increment() async { // 模擬某個(gè)異步操作 await new Future.delayed(new Duration(seconds: 1)); // 完成后 dispatch dispatch(Types.Increment); } 

傳遞數(shù)據(jù)

在調(diào)用 dispatch 的時(shí)候 action 是一個(gè) dynamic 類型，在上面是沒有傳遞數(shù)據(jù)的，而數(shù)據(jù)的變化在 Reducer 里。

那么如何傳遞數(shù)據(jù)呢？在 action 里是一個(gè) dynamic 類型，因此可以把 action 寫成 Map 類型，在 Map 里獲取 type 和 data。

// Reducer 處理 State reducer(State state, action) { if (action['type'] == Types.Increment) { state.count = action['data']; return state.newState(state); }return state; }// 某個(gè) Action increment() async { // 模擬某個(gè)異步操作 await new Future.delayed(new Duration(seconds: 1)); // 完成后 dispatch dispatch({ 'type': Types.Increment, 'data': store.state.count + 1, }); } 

這樣就可以把數(shù)據(jù)從 Action 傳遞到 Reducer 了。

精簡(jiǎn)代碼

在上面的代碼里，在 Action 里得到最新的狀態(tài)只，在 Reducer 里又需要進(jìn)行一次賦值，這樣會(huì)多出很多重復(fù)的代碼?，F(xiàn)在把 Action 變成一個(gè) newState 函數(shù)，在函數(shù)里更新最新的狀態(tài)，在 Reducer 里只創(chuàng)建新的實(shí)例即可，這樣可以節(jié)省很多代碼，Types 也不需要寫了。

// Reducer 處理 State reducer(State state, action) { if (action is Function) { var s = state.newState(action(state)); if (s != null) return s; } return state; }// 某個(gè) Action increment() async { // 模擬某個(gè)異步操作 await new Future.delayed(new Duration(seconds: 1)); // 完成后 dispatchdispatch((State state) { // 要更新的狀態(tài) state.count++; return state; }); } 

不知看懂了沒有，實(shí)際上就是利用傳遞函數(shù)與上下文的特點(diǎn)。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/17631.html