Flutter异步状态管理插件async_redux的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter异步状态管理插件async_redux的使用

简介

Pub popularity Pub Version Awesome Flutter GitHub stars Code Climate issues GitHub closed issues GitHub contributors GitHub repo size GitHub forks PRs Welcome Developed by Marcelo Glasberg Glasberg.dev on pub.dev Platforms

Platipus Flutter React

Async Redux 是一个优化过的Redux版本,旨在简化状态管理。它易于学习和使用,同时具备处理复杂应用程序的能力。该库由 Marcelo Glasberg 开发,已在数百个实际项目中得到验证。

什么是Async Redux?

Async Redux是一个从头开始编写的状态管理库,灵感来源于Redux。它提供了以下特性:

  • 简单易学:快速上手,团队成员可以轻松理解和修改代码。
  • 功能强大:能够处理复杂的大型应用。
  • 易于测试:支持单元测试,确保代码质量。

安装

pubspec.yaml文件中添加依赖:

dependencies:
  async_redux: ^4.0.0

然后运行 flutter pub get

使用示例

创建Store并初始化State

首先定义初始状态,并创建一个Store实例来保存状态:

import 'package:async_redux/async_redux.dart';

void main() {
  // 定义初始状态为0
  var store = Store<int>(initialState: 0);
  runApp(MyApp(store: store));
}

class MyApp extends StatelessWidget {
  final Store<int> store;

  const MyApp({Key? key, required this.store}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreProvider<int>(
      store: store,
      child: MaterialApp(
        home: MyHomePageConnector(),
      ),
    );
  }
}

定义Action

接下来,定义一个简单的同步Action来增加计数器:

class IncrementAction extends ReduxAction<int> {
  final int amount;

  IncrementAction({required this.amount});

  @override
  int reduce() => state + amount;
}

连接Store与Widget

为了将Store中的状态传递给UI组件,我们使用StoreConnector

class MyHomePageConnector extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<int, ViewModel>(
      vm: () => Factory(this),
      builder: (BuildContext context, ViewModel vm) => MyHomePage(
        counter: vm.counter,
        onIncrement: vm.onIncrement,
      ),
    );
  }
}

创建ViewModel

ViewModel用于封装从Store中提取的数据及操作方法:

class ViewModel extends Vm {
  final int counter;
  final VoidCallback onIncrement;

  ViewModel({
    required this.counter,
    required this.onIncrement,
  }) : super(equals: [counter]);
}

class Factory extends VmFactory<int, MyHomePageConnector, ViewModel> {
  Factory(connector) : super(connector);

  @override
  ViewModel fromStore() => ViewModel(
        counter: state,
        onIncrement: () => dispatch(IncrementAction(amount: 1)),
      );
}

构建UI界面

最后,在MyHomePage中展示计数器并提供按钮进行增量操作:

class MyHomePage extends StatelessWidget {
  final int? counter;
  final VoidCallback? onIncrement;

  MyHomePage({
    Key? key,
    this.counter,
    this.onIncrement,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Increment Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text('$counter', style: const TextStyle(fontSize: 30))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: onIncrement,
        child: const Icon(Icons.add),
      ),
    );
  }
}

通过上述步骤,你已经成功地使用了async_redux来进行基本的状态管理和UI渲染。更多高级用法请参考官方文档:https://asyncredux.com


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

1 回复

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


当然,下面是一个关于如何在Flutter中使用async_redux插件进行异步状态管理的示例代码。async_redux是一个用于Flutter的状态管理库,它基于Redux架构模式,并且支持异步操作。

首先,确保你已经在pubspec.yaml文件中添加了async_redux依赖:

dependencies:
  flutter:
    sdk: flutter
  async_redux: ^x.y.z  # 替换为最新版本号

然后,你可以按照以下步骤创建一个简单的示例应用。

1. 定义Action和Store

首先,定义一些Action和Store。Action是用于触发状态更新的操作,Store则用于保存应用的状态。

import 'package:async_redux/async_redux.dart';

// 定义Action
class IncrementAction extends ReduxAction<AppState> {
  final int amount;

  IncrementAction(this.amount);

  @override
  void reduce() {
    state.counter += amount;
  }
}

class FetchDataAction extends AsyncReduxAction<AppState> {
  FetchDataAction() : super(true);  // 传入true表示这是一个异步Action

  @override
  Future<void> asyncReduce() async {
    // 模拟异步数据获取
    await Future.delayed(Duration(seconds: 2));
    dispatch(DataFetchedAction("Fetched Data!"));
  }
}

class DataFetchedAction extends ReduxAction<AppState> {
  final String data;

  DataFetchedAction(this.data);

  @override
  void reduce() {
    state.data = data;
  }
}

// 定义State
class AppState extends ReduxState {
  int counter = 0;
  String? data;

  AppState() : super();

  @override
  List<ReduxAction> getInitialActions() {
    return [FetchDataAction()];  // 初始化时触发数据获取
  }
}

2. 创建Store并连接到UI

接下来,创建Store并将其连接到Flutter的UI。

import 'package:flutter/material.dart';
import 'package:async_redux/async_redux.dart';
import 'package:flutter_redux/flutter_redux.dart';

void main() {
  Store<AppState> store = Store<AppState>(
    initialState: AppState(),
    middleware: createAsyncMiddleware<AppState>(),  // 使用异步中间件
    viewMiddleware: buildViewMiddleware<AppState>(), // 构建视图中间件
  );

  runApp(ReduxProvider<AppState>(
    store: store,
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

3. 使用StoreConnector连接UI组件

最后,使用StoreConnector将UI组件连接到Store。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Async Redux Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            StoreConnector<AppState, int>(
              converter: (store) => store.state.counter,
              builder: (context, counter) {
                return Text(
                  'Counter: $counter',
                  style: TextStyle(fontSize: 24),
                );
              },
            ),
            SizedBox(height: 20),
            StoreConnector<AppState, String?>(
              converter: (store) => store.state.data,
              builder: (context, data) {
                return Text(
                  'Data: ${data ?? "Loading..."}',
                  style: TextStyle(fontSize: 20),
                );
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => StoreProvider.dispatch<AppState>(
                context,
                IncrementAction(1),
              ),
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们定义了一个简单的计数器和一个异步数据获取操作。计数器通过IncrementAction来更新,而数据获取则通过FetchDataAction触发,并在数据获取完成后通过DataFetchedAction更新状态。

UI部分使用StoreConnector连接到Store,以便从Store中获取最新的状态并更新UI。

希望这个示例能够帮助你理解如何在Flutter中使用async_redux插件进行异步状态管理。

回到顶部