在 React Native 要做狀態管理通常都是使用 Redux，這種方式非常好。幸運的是，在 Flutter 也支持使用 Redux。

flutter_redux 是一個支持在 Flutter 里使用 Redux 的庫，但并不是使用 JS 版本的 Redux，而是使用 dart_redux，這是一個在 dart 上的 Redux 實現。

Redux 的基礎知識就不多說了，在這里主要介紹如何在 Flutter 里使用 Redux 管理應用的數據狀態。

先安裝依賴：

dependencies: redux: ^3.0.0 flutter_redux: ^0.5.2 

在 Flutter Redux 里有一個必要知道的概念：

• StoreProvider - 一個組件，它會將給定的 Redux Store 傳遞給它的所有子組件。
• StoreBuilder - 一個子 Widget 組件，StoreProvider 它從 Action 中獲取 Store 并將其傳遞給 Widget builder 函數。
• StoreConnector - 從最近的 StoreProvider 祖先獲取 Store 的子 Widget，使用給定的函數將其轉換 Store 為 Action，并將其傳遞給函數。只要 Store 發出更改事件，Widget 就會自動重建。無需管理訂閱！

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

下面來看一個簡單的示例。

import 'package:flutter/material.dart'; import 'package:redux/redux.dart'; import 'package:flutter_redux/flutter_redux.dart';void main() { runApp(new FlutterReduxApp()); }// 定義個 Types 枚舉 enum Types { Increment }// Reducer 處理 int Reducer(int state, action) { if (action == Types.Increment) { return state + 1; }return state; }// 創建一個 Action 類 class Action { dynamic store; dynamic dispatch; Action(store) { this.store = store; this.dispatch = store.dispatch; }// 某個 Action increment() { dispatch(Types.Increment); } }class FlutterReduxApp extends StatelessWidget { // 創建一個 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( // 創建一個 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:'), // 連接器，連接之后可以獲取數據，在 builder 里渲染內容 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), ), ), ), ); } } 

在需要改變狀態的組件里使用 StoreConnector 連接數據（避免對整個內容做一次性的連接，導致整個渲染）。

在這里 Store 是一個泛型類，在初始化時請給它一個類型，否則就是 Store<int>。很多時候 State 是一個復雜的結構，并不是一個簡單的 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); // 返回一個新的實例 newState(State obj) { this.name = obj.name; this.list = obj.list; this.count = obj.count; return new State(obj.list, obj.name, obj.count); } }// 創建一個 store final store = new Store<State>(reducer, initialState: new State([], 'abc', 0));// 連接器，連接之后可以獲取數據，在 builder 里渲染內容 new StoreConnector<State, String>( converter: (store) => store.state.count.toString(), builder: (context, count) => new Text(count), ), 

StoreConnector 里的 converter 一定要是返回 String 嗎？目前為止是的，因為大多數的在 Widget 上都是使用字符串渲染。

此外，可以使用 StoreConnector 對某個組件進行數據的連接，對于不變化的組件那就沒必要連接了。

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

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

中間件

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

Store 的第三個參數是一個接受中間件的參數，我們可以通過下面的定義中間件方式，為 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 即可，在等待異步操作完成后再調用 dispatch。

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

傳遞數據

在調用 dispatch 的時候 action 是一個 dynamic 類型，在上面是沒有傳遞數據的，而數據的變化在 Reducer 里。

那么如何傳遞數據呢？在 action 里是一個 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; }// 某個 Action increment() async { // 模擬某個異步操作 await new Future.delayed(new Duration(seconds: 1)); // 完成后 dispatch dispatch({ 'type': Types.Increment, 'data': store.state.count + 1, }); } 

這樣就可以把數據從 Action 傳遞到 Reducer 了。

精簡代碼

在上面的代碼里，在 Action 里得到最新的狀態只，在 Reducer 里又需要進行一次賦值，這樣會多出很多重復的代碼。現在把 Action 變成一個 newState 函數，在函數里更新最新的狀態，在 Reducer 里只創建新的實例即可，這樣可以節省很多代碼，Types 也不需要寫了。

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

不知看懂了沒有，實際上就是利用傳遞函數與上下文的特點。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.kwpm.com.cn/17631.html