一直以来 Fish Redux 和 Flutter Redux 的最佳实践并不同，一个是 Page 级别的状态管理，一个是 App 级别状态管理，所以算是错位竞品。

引入:

  1. dependencies:
  2.   fish_redux: ^0.2.4

推荐的目录结构

  1. sample_page
  2. -- action.dart
  3. -- page.dart
  4. -- view.dart
  5. -- effect.dart
  6. -- reducer.dart
  7. -- state.dart

从一个简单的案例开始

page.dart

  1. import 'package:fish_redux/fish_redux.dart';
  2. import 'state.dart';
  3. import 'view.dart';
  4. import 'reducer.dart';
  6. class TestPage extends Page<TestState, Map<String, dynamic>> {
  7.   TestPage():
  8.     super(
  9.       initState: initState,
  10.       view: buildView,
  11.       reducer: buildReducer(),
  12.     );
  13. }
  1. TestPage 继承自 Page
  2. initState 其实是缩写, 完整的写法为: initState: (Map<String, dynamic> args) => initState(args),
  3. view 也是缩写, 完整的写法为: view: (TestState state, Dispatch dispatch, ViewService viewService) => buildView(state, dispatch, viewService),
  4. reducer 用于改变状态

state.dart

  1. import 'package:fish_redux/fish_redux.dart';
  3. class TestState implements Cloneable<TestState> {
  4.   bool isLoading;
  5.   String msg;
  7.   @override
  8.   TestState clone() {
  9.     return TestState()
  10.       ..isLoading = isLoading
  11.       ..msg = msg;
  12.   }
  13. }
  15. TestState initState(Map<String, dynamic> args) {
  16.   final state = new TestState();
  17.   state.msg = args['msg'];
  18.   state.isLoading = false;
  19.   return state;
  20. }
  1. 为什么要实现 clone 方法: 在之后的 reducer 需要使用
  2. initState 接收一个 Map 类型的参数, 需要添加一个 msg 的 key

view.dart

  1. import 'package:fish_redux/fish_redux.dart';
  2. import 'package:flutter/material.dart';
  3. import 'state.dart';
  5. import 'action.dart';
  7. Widget buildView(TestState state, Dispatch dispatch, ViewService viewService) {
  8.   return Scaffold(
  9.     appBar: AppBar(title: Text("Hello ${state.msg}")),
  10.     body: Column(
  11.       children: <Widget>[
  12.         Center(
  13.           child: state.isLoading ? Text('Loading') : Text("Hello ${state.msg}"),
  14.         ),
  15.         FlatButton(
  16.           child: Text('click me'),
  17.           onPressed: () {
  18.             bool loading = !state.isLoading;
  19.             dispatch(TestActionCreator.changeLoading(loading));
  20.           },
  21.         )
  22.       ],
  23.     ),
  24.   );
  25. }
  1. 引入了 action.dart, 用来定义 Action 的
  2. buildView 接收三个参数: state dispatch viewService
  3. 返回值为一个 Widget, 跟普通 Widget 相同的写法
  4. 使用状态时使用 state.msg state.isLoading
  5. 修改状态时使用 dispatch(TestActionCreator.changeLoading(loading))

action.dart

  1. import 'package:fish_redux/fish_redux.dart';
  3. enum TestAction {
  4.   changeLoading
  5. }
  7. class TestActionCreator {
  8.   static Action changeLoading(bool loading) {
  9.     return Action(TestAction.changeLoading, payload: loading);
  10.   }
  11. }
  1. 通过 TestAction 枚举所有可能用到的 Action
  2. 在 TestActionCreator 中定义所有的 Action
  3. Action 接收两个参数, 第一个是 Action 名, 第二个是 payload

reducer.dart

  1. import 'package:fish_redux/fish_redux.dart';
  3. import 'action.dart';
  4. import 'state.dart';
  6. Reducer<TestState> buildReducer() {
  7.   return asReducer<TestState>(<Object, Reducer<TestState>>{
  8.     TestAction.changeLoading: _changeLoading,
  9.   });
  10. }
  12. TestState _changeLoading(TestState state, Action action) {
  13.   final TestState newState = state.clone();
  14.   newState.isLoading = action.payload;
  15.   return newState;
  16. }
  1. asReducer 指定了 Action 具体的操作
  2. 操作 state 时需要使用深拷贝 state.clone(), 否则视图不会更新, 这里看出为什么 TestState 需要实现 Cloneable 接口了
  3. action.payload 为传入的参数, 对应 view.dart 中的 dispatch(TestActionCreator.changeLoading(loading)), 其中 loading 就是这个 payload

使用此带状态管理的页面

main.dart

  1. TestPage().buildPage({'msg': 'world'})

前面讲到, initState 接收一个 Map 类型的参数, 需要添加一个 msg 的 key, 这里的参数 {'msg': 'world'} 便与之对应

完成代码：

  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_app_bootstrapper/pages/test/page.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.       title: 'Flutter Demo',
  11.       theme: ThemeData(
  12.         primarySwatch: Colors.blue,
  13.       ),
  14.       home: TestPage().buildPage({'msg': 'world'}),
  15.     );
  16.   }
  17. }

路由管理

fish_redux 还有一个很赞的功能, 可以方便地进行路由管理

直接创建路由

创建路由管理: app_route.dart

  1. import 'package:fish_redux/fish_redux.dart';
  2. import 'package:flutter_app_bootstrapper/pages/test/page.dart';
  4. final AbstractRoutes pageRoutes = PageRoutes(
  5.   pages: <String, Page<Object, dynamic>>{
  6.     'test': TestPage(),
  7.   },
  8. );

使用路由: main.dart, 在 MaterialApp -> home 参数中使用

  1. pageRoutes.buildPage('test', {'msg': 'world'})

使用 global 包装

看很多项目都使用以下方式创建路由, 我并不喜欢, 不过还是放出来看看。

创建路由管理：app_route.dart

  1. import 'package:fish_redux/fish_redux.dart';
  2. import 'package:flutter_app_bootstrapper/pages/test/page.dart';
  4. class AppRoute {
  5.   static AbstractRoutes _global;
  7.   static AbstractRoutes get global {
  8.     if (_global == null) {
  9.       _global = PageRoutes(pages: <String, Page<Object, dynamic>>{
  10.         RoutePath.test: TestPage(),
  11.       });
  12.     }
  13.     return _global;
  14.   }
  15. }
  17. class RoutePath {
  18.   static const String test = 'test';
  19. }

使用路由：main.dart, 在 MaterialApp -> home 参数中使用

  1. AppRoute.global.buildPage(RoutePath.test, {'msg': 'world'}),

参考资料