flutter_redux框架的使用

2019年5月8日 204次阅读 来源: 我是黄教主啊

框架简介以及作用

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);
    );
    原文作者：我是黄教主啊
    原文地址: https://www.jianshu.com/p/68596599750d
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞