flutter_redux框架的使用

框架簡介以及作用

flutter_redux是基於InheritedWidget封裝的用於Widget樹的數據傳遞與共享的的一套框架，它能高效的完成數據共享，進而達到ui及時更新等目的，使用起來略顯複雜，一般不是很多的數據更新不建議使用，直接用InheritedWidget就能解決，當Widget綁定的很多的時候，使用起來就會很爽了。🌼

開始使用

打開pubspec.yaml添加如下代碼：

dependencies:
  flutter:
    sdk: flutter
  flutter_redux: ^0.5.3

關於版本可前往dart庫查看，傳送門：flutter_redux

使用步驟：
1.新建一個數據共享類，也可以是基本數據類型，裏面申明需要共享的數據
2.新建一個枚舉用於消息發送與區分
3.申明一個方法用於處理數據更新邏輯與新的數據返回
4.申明Store類，將步驟4的方法放進去
5.在需要共享數據的地方申明StoreProvider跟佈局，綁定Store類
6.使用StoreConnector類或StoreBuilder處理數據邏輯與Widget交互邏輯

注意事項：
使用StoreConnector要注意前面的泛型申明，具體使用看以下示例代碼(來自官方示例)，此示例實現了一個點擊按鈕文本加一的效果。

代碼分析

import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

void main() {
  runApp(FlutterReduxApp());
}

//步驟2，用於在步驟三中做消息區分與消息發送
enum Action { Increment }

//步驟1的數據共享類是count,一個基本數據類型
//步驟3，處理數據的更新邏輯，此處是做加一操作，注意需要把新的類型返回
int reducer(int count, action) {
  if (action == Action.Increment) {
    return count + 1;
  }
  return count;
}

class FlutterReduxApp extends StatelessWidget {
  //步驟4 申明一個store,必須傳入一個方法進去，其餘的參數選填，這裏選擇初始化一下基礎參數
  final store = Store(reducer, initialState: 0);

  @override
  Widget build(BuildContext context) {
    return StoreProvider(
        store: store, //綁定store
        child: MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Title"),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text("You have pushed the button this many times:"),
                   //當需要使用到共享數據的時候使用StoreConnector來獲取數據
                  StoreConnector<int, String>(builder: (context, value) {
                    return Text(value, style: Theme.of(context).textTheme.display1);
                  }, converter: (Store store) {
                    return store.state.toString();
                  })
                ],
              ),
            ),
            floatingActionButton: StoreConnector<int, VoidCallback>(
              converter: (Store store) {
                return () => store.dispatch(Action.Increment); //發送數據
              },
              builder: (BuildContext context, VoidCallback callback) {
                return FloatingActionButton(
                    onPressed: callback, child: Icon(Icons.add));
              },
            ),
          ),
        ));
  }
}

源碼中主要注意如下地方：
1.StoreConnector的使用
StoreConnector主要是起一個數據轉化的作用，可以在組件賦值之前做一些數據轉化操作，而StoreBuilder是直接將共享的數據賦值在組件上，具體的選擇看需求而定。
StoreConnector有兩個泛型參數，第一個是我們的原本的共享類型，第二個是我們需要轉換的參數類型，它可以是類，方法，基本數據類型等都可以
它需要申明兩個方法：

• converter 起數據轉化作用，例如源碼中申明瞭一個String類型的轉化參數，那麼converter的返回值就是一個String類型，返回值會直接傳遞到builder方法的第二個參數中去。
• builder 接收數據，構建Widget交互，第一個context不需要解釋，第二個參數就是我們申明的轉化參數的返回值，返回值類型視傳入的泛型類型而定。

經過以上分析，需要注意的就是泛型的申明以及它的數據流向：StoreConnector申明一個轉化類型=>converter 轉化=>
builder方法中接收並使用

store.dispatch(Action.Increment);
此方法用來通知數據的改變與更新

StoreBuilder
與StoreConnector不同，它只需要申明一個共享數據類型的泛型，在使用中也只有一個builder參數，使用方式與StoreConnector一樣，示例：

return new StoreProvider(
      store: store,
      child: new StoreBuilder<String>(builder: (context, count) {
        return new Text(count);
    );