Flutter 实体状态管理插件 redux_entity 的使用

redux_entity 是一个用于在 Redux 存储中维护对象集合的工具。它旨在与 Angular 的优秀模块 @ngrx/entity 靠近匹配，主要修改点在于 TypeScript 和 Dart 之间的差异。

测试工具

如果你基于 RemoteEntityReducer 创建自己的减少器（reducer），确保良好的测试覆盖率可能会很费劲。你不仅需要测试减少器对你的自定义操作符的响应，还需要确保现有的功能继续正常工作。

为了简化这个过程，建议将以下文件复制到你的测试套件中：

// 远程实体减少器测试器

你可以使用这个测试器来测试当添加自定义操作时，现有的功能是否继续正常工作。

贡献

欢迎贡献！但是，

• 本项目旨在达到生产就绪状态。没有附带测试的 PR 将不会被合并。
• 我们希望促进健康、友好且包容的开发社区。因此，请阅读并同意遵守 行为准则。

示例代码

下面是使用 redux_entity 的完整示例代码。

安装依赖

首先，在你的 pubspec.yaml 文件中添加 redux_entity 依赖：

dependencies:
  flutter:
    sdk: flutter
  redux:
  redux_entity:

然后运行 flutter pub get 来安装这些依赖。

定义实体模型

定义一个简单的实体类：

class User {
  final String id;
  final String name;

  User({required this.id, required this.name});

  // 重写 == 和 hashCode 方法，以便可以比较实体对象
  [@override](/user/override)
  bool operator ==(Object other) =>
      identical(this, other) ||
          other is User &&
              runtimeType == other.runtimeType &&
              id == other.id &&
              name == other.name;

  [@override](/user/override)
  int get hashCode => id.hashCode ^ name.hashCode;
}

创建 Redux Store

创建一个 Redux store 并使用 EntityReducer 管理用户实体：

import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:redux_entity/redux_entity.dart';

// 定义初始状态
final initialState = EntityState<User>();

// 创建 store
final store = Store<EntityState<User>>(
  EntityState.reducer,
  initialState: initialState,
);

定义 Action

定义一些基本的 action 用于管理用户实体：

// 添加用户
class AddUserAction {
  final User user;

  AddUserAction(this.user);
}

// 删除用户
class RemoveUserAction {
  final String userId;

  RemoveUserAction(this.userId);
}

创建 Reducer

创建一个处理这些 action 的 reducer：

EntityReducer<User> userReducer(EntityState<User> state, dynamic action) {
  if (action is AddUserAction) {
    return state.add(action.user);
  } else if (action is RemoveUserAction) {
    return state.removeWhere((user) => user.id == action.userId);
  }
  return state;
}

创建 UI 组件

创建一个 UI 组件，用于展示和操作用户列表：

class UserList extends StatelessWidget {
  final Store<EntityState<User>> store;

  UserList(this.store);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('用户列表')),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              // 添加一个新用户
              store.dispatch(AddUserAction(User(id: '1', name: '张三')));
            },
            child: Text('添加用户'),
          ),
          Expanded(
            child: StreamBuilder<EntityState<User>>(
              stream: store.onChange,
              initialData: store.state,
              builder: (context, snapshot) {
                final users = snapshot.data!.items;
                return ListView.builder(
                  itemCount: users.length,
                  itemBuilder: (context, index) {
                    final user = users[index];
                    return ListTile(
                      title: Text(user.name),
                      trailing: IconButton(
                        icon: Icon(Icons.delete),
                        onPressed: () {
                          // 删除一个用户
                          store.dispatch(RemoveUserAction(user.id));
                        },
                      ),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

主程序

最后，创建主程序来启动应用：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return StoreProvider<EntityState<User>>(
      store: store,
      child: MaterialApp(
        home: UserList(store),
      ),
    );
  }
}