Flutter状态管理插件agility_redux的使用

Flutter状态管理插件agility_redux的使用

Agility Redux 是一款模块化，可插拔的 Redux 状态管理库。

  • 支持多业务模块，模块间解耦。
  • 模块可插拔。
  • State、Action 区分 Public 和 Private，私有部分仅能在模块内部访问和使用。
  • State 多份实例，可以 Push 和 Pop。

本项目包含以下几个独立部分，可分别使用，也可以组合使用：

  • agility_redux 基本 redux 实现，纯 Dart 库不依赖 Flutter，方便单元测试。
  • agility_redux_widget redux 相关的 widget。
  • agility_redux_bloc 业务模块管理，路由管理。

特别说明

感谢 redbrogdon，灵感来自于 rebloc 项目。

完整示例Demo

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:agility_redux/agility_redux.dart';

// 定义一个简单的 State 类
class CounterState extends StateBase {
  int count = 0;

  [@override](/user/override)
  List<ReducerFunction> get reducers => [
        ReducerFunction((state, action) {
          if (action is IncrementAction) {
            state.count++;
          }
          return state;
        }),
      ];
}

// 定义一个简单的 Action 类
class IncrementAction extends Action {}

// 创建一个 Store 来管理状态
final store = Store<CounterState>(
  initialState: CounterState(),
  reducer: counterReducer,
);

// 定义一个简单的 Reducer 函数
CounterState counterReducer(CounterState state, action) {
  if (action is IncrementAction) {
    state.count++;
  }
  return state;
}

// 创建一个 Widget 来展示状态
class CounterWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return StoreConnector<CounterState, int>(
      converter: (store) => store.state.count,
      builder: (context, count) {
        return Scaffold(
          appBar: AppBar(title: Text('Agility Redux Example')),
          body: Center(
            child: Text('Count: $count'),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              store.dispatch(IncrementAction());
            },
            child: Icon(Icons.add),
          ),
        );
      },
    );
  }
}

// 主函数
void main() {
  runApp(MaterialApp(
    home: CounterWidget(),
  ));
}

更多关于Flutter状态管理插件agility_redux的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter状态管理插件agility_redux的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


agility_redux 是一个基于 Redux 模式的 Flutter 状态管理插件，它旨在简化 Redux 的使用，并提供了更灵活的 API 来管理应用状态。以下是如何在 Flutter 项目中使用 agility_redux 的基本步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  agility_redux: ^0.0.1  # 请查看 pub.dev 获取最新版本

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

2. 创建 Redux 基本结构

定义状态类

首先，你需要定义一个表示应用状态的类。这个类通常包含应用中所有需要管理的数据。

class AppState {
  final int counter;

  AppState({this.counter = 0});

  AppState copyWith({int? counter}) {
    return AppState(
      counter: counter ?? this.counter,
    );
  }
}

定义 Action

Action 是一个表示状态变化的类。你可以定义多个 Action 来表示不同的状态变化。

class IncrementAction {}

class DecrementAction {}

定义 Reducer

Reducer 是一个纯函数，它接收当前的状态和一个 Action，然后返回一个新的状态。

AppState appReducer(AppState state, dynamic action) {
  if (action is IncrementAction) {
    return state.copyWith(counter: state.counter + 1);
  } else if (action is DecrementAction) {
    return state.copyWith(counter: state.counter - 1);
  }
  return state;
}

3. 创建 Store

Store 是 Redux 的核心，它持有应用的整个状态树，并负责分发 Action 和执行 Reducer。

import 'package:agility_redux/agility_redux.dart';

final store = Store<AppState>(
  initialState: AppState(),
  reducer: appReducer,
);

4. 在 Flutter 中使用 Store

创建 StoreProvider

StoreProvider 是一个 InheritedWidget，它允许你在整个 widget 树中访问 Store。

import 'package:flutter/material.dart';
import 'package:agility_redux/agility_redux.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return StoreProvider(
      store: store,
      child: MaterialApp(
        title: 'Agility Redux Example',
        home: CounterScreen(),
      ),
    );
  }
}

使用 StoreConnector

StoreConnector 是一个 widget，它允许你将 Store 中的状态映射到 widget 的 props，并在状态变化时重建 widget。

class CounterScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: StoreConnector<AppState, int>(
          converter: (store) => store.state.counter,
          builder: (context, counter) {
            return Text(
              'Counter: $counter',
              style: Theme.of(context).textTheme.headline4,
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              store.dispatch(IncrementAction());
            },
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              store.dispatch(DecrementAction());
            },
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}
回到顶部