Flutter Redux代码生成插件agility_redux_generator的使用

agility_redux_generator 是一个用于自动生成 Flutter Redux 相关代码的插件。它可以帮助开发者快速生成 Redux 的 Action、Reducer 和 Store 等代码，从而减少重复工作并提高开发效率。

使用步骤

1. 初始化项目

首先，创建一个新的 Flutter 项目：

flutter create redux_example
cd redux_example

2. 添加依赖

在 pubspec.yaml 文件中添加 agility_redux_generator 和 build_runner 作为开发依赖：

dev_dependencies:
  agility_redux_generator: ^1.0.0
  build_runner: ^2.1.7

然后运行以下命令以安装依赖：

flutter pub get

3. 创建模型类

在 lib/models 目录下创建一个简单的模型类 CounterModel.dart：

// lib/models/counter_model.dart
class CounterModel {
  final int value;

  const CounterModel({required this.value});
}

4. 创建 Actions

在 lib/actions 目录下创建一个文件 counter_actions.dart，定义 Redux 的 Action 类：

// lib/actions/counter_actions.dart
import 'package:redux/redux.dart';

// 定义一个 IncrementAction
class IncrementAction {}

// 定义一个 DecrementAction
class DecrementAction {}

// 定义一个 ResetAction
class ResetAction {}

// 将这些 Action 注册到 Redux 中
final increment = new TypedAction<IncrementAction>();
final decrement = new TypedAction<DecrementAction>();
final reset = new TypedAction<ResetAction>();

5. 使用代码生成器生成 Reducer

在 lib/reducers 目录下创建一个文件 counter_reducer.dart，并定义初始状态：

// lib/reducers/counter_reducer.dart
import 'package:redux/redux.dart';
import '../models/counter_model.dart';

// 初始状态
const initialState = CounterModel(value: 0);

// 手动编写部分 Reducer 逻辑
CounterModel counterReducer(CounterModel state, dynamic action) {
  return state;
}

然后，在根目录下创建一个 build.yaml 文件，配置代码生成器：

# build.yaml
targets:
  $default:
    builders:
      agility_redux_generator|redux_generator:
        options:
          output_dir: "lib/generated"
          reducer_file: "lib/reducers/counter_reducer.dart"
          model_class: "CounterModel"
          actions_file: "lib/actions/counter_actions.dart"

运行代码生成器：

flutter pub run build_runner build --delete-conflicting-outputs

代码生成器会自动在 lib/generated 目录下生成 Reducer 的实现代码。

6. 创建 Store

在 lib/store 目录下创建一个文件 store.dart，用于配置 Redux Store：

// lib/store/store.dart
import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import '../reducers/counter_reducer.dart';
import '../actions/counter_actions.dart';

// 创建 Store
final store = Store<CounterModel>(
  counterReducer,
  initialState: CounterModel(value: 0),
);

7. 创建 UI 组件

在 lib/ui 目录下创建一个文件 counter_page.dart，用于展示和操作计数器：

// lib/ui/counter_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import '../store/store.dart';
import '../actions/counter_actions.dart';

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Redux Counter Example'),
      ),
      body: Center(
        child: StoreConnector<CounterModel, int>(
          converter: (store) => store.state.value,
          builder: (context, value) {
            return Text('Count: $value');
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              store.dispatch(IncrementAction());
            },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              store.dispatch(DecrementAction());
            },
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              store.dispatch(ResetAction());
            },
            tooltip: 'Reset',
            child: Icon(Icons.refresh),
          ),
        ],
      ),
    );
  }
}

8. 配置主应用

修改 lib/main.dart 文件，将 CounterPage 设置为主页面：

// lib/main.dart
import 'package:flutter/material.dart';
import 'ui/counter_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Redux Counter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterPage(),
    );
  }
}

9. 运行应用

运行应用并查看效果：

flutter run