Flutter之Redux

导入库

dependencies:
  flutter_redux: ^0.6.0
  redux: ^4.0.0

创建传递数据的实例,行为，初始化

// 第一步
class User {
  String name;
  int age;

  User.initState() {
    // 初始化数值
    name = "张三";
    age = 10;
  }

  User(this.name, this.age);
}
// 第二步
User reducer(User user, action) {
	// 行为判断
  if (action == UserActions.RESET) {
    return User(user.name, 10);
  } else if (action == UserActions.ADD) {
    return User(user.name, user.age + 1);
  }
  return user;
}
// 行为枚举
enum UserActions {
	// 重置
  RESET,
	// 增加
  ADD,
}

在顶层创建store

void main() {
  Store<User> store = Store<User>(reducer, initialState: User.initState());
  runApp(MyApp(store));
}

class MyApp extends StatelessWidget {
  final Store<User> store;
  MyApp(this.store);
  ...
}

创建视图与数据的联系

class MyApp extends StatelessWidget {
  final Store<User> store;
  MyApp(this.store);
  @override
  Widget build(BuildContext context) {
    return StoreProvider<User>(
      store: store,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("第一页"),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // 类型转换 User -> void方法
                StoreConnector<User, VoidCallback>(
                    builder: (context, callback) {
                      return FlatButton(
                        child: Text("重置"),
                        onPressed: callback,
                      );
                    }, converter: (store) {
					// 发射行为
                  return () => store.dispatch(UserActions.RESET);
                }),
                Text("用户信息如下："),
                StoreConnector<User, Widget>(
                    builder: (context, userInfoWidget) {
                      // 数据和视图绑定
                      return userInfoWidget;
                    }, converter: (store) {
                  // 数据进行转换
                  return Text("姓名：${store.state.name}，年龄：${store.state.age}");
                })
              ],
            ),
          ),
          floatingActionButton:
          StoreConnector<User, VoidCallback>(builder: (context, callback) {
            return FloatingActionButton(
              onPressed: callback,
              tooltip: "增加",
              child: Icon(Icons.add),
            );
          }, converter: (store) {
			// 发射行为
            return () => store.dispatch(UserActions.ADD);
          }),
        ),
      ),
    );
  }
}

效果图