2亿用户背后的Flutter最新开源框架；Fish-Redux

Fish-Redux 是一个基于 Redux 数据管理理念的 Fish Redux 框架。它是一个高效的应用开发框架，它的核心思想是“可预测的状态容器”。

以下是一个简单的 Fish-Redux 应用程序的示例，它展示了如何创建一个简单的计数器应用程序：

import 'package:fish_redux/fish_redux.dart';
 
// 1. 定义你的状态类
class CounterState implements Cloneable<CounterState> {
  int count;
 
  CounterState({this.count = 0});
 
  @override
  CounterState clone() {
    return CounterState();
  }
}
 
// 2. 创建一个动作类
class IncrementAction {
  // 动作构造器
  IncrementAction();
}
 
// 3. 创建Reducer函数来响应动作并修改状态
CounterState counterReducer(CounterState state, Action action) {
  if (action is IncrementAction) {
    return CounterState(count: state.count + 1);
  }
  return state;
}
 
// 4. 创建视图构建器
Widget buildView(CounterState state, Dispatch dispatch, ViewService viewService) {
  return GestureDetector(
    child: Text('${state.count}'),
    onTap: () => dispatch(IncrementAction()),
  );
}
 
// 5. 将它们组合在一起创建页面
class CounterPage extends Page<CounterState, Map<String, dynamic>> {
  CounterPage()
      : super(
          initState: (context) => CounterState(),
          // 可选的，如果你需要从其他页面接收参数
          // 例如: '/counter' 路径将会调用此构造函数并传递参数
          // 你可以在这里处理参数
          binding: Binding<CounterState>(),
          dependencies: Dependencies<CounterState>(
              adapter: null, // 可选的，默认是JsonAdapter
              slots: <String, Dependent<CounterState>>{
                'view': Slot<CounterState>(
                    builder: buildView, child: null),
              }),
          middleware: <Middleware<CounterState>>[],
          // 可选的，如果你需要自定义页面路由
          // 例如: '/counter/:id' 路径将会调用此构造函数并传递参数
          // 你可以在这里处理参数
        );
}
 
// 6. 使用页面
void main() {
  runApp(FishReduxApp<CounterState>(
    home: CounterPage(),
    // 可选的，如果你需要全局配置
  ));
}

这个示例展示了如何使用 Fish-Redux 创建一个简单的计数器应用程序。它包括定义状态、创建动作、编写 Reducer 函数和构建视图。最后，将这些组合在一起创建一个页面，并在主函数中运行应用程序。这个框架使得构建复杂的界面和管理状态变得更加高效和可预测。