Flutter状态管理插件agility_redux_widget的使用

Flutter状态管理插件agility_redux_widget的使用

Agility Redux 是一款模块化，可插拔的 Redux 状态管理库。它具有以下特点：

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

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

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

特别说明

感谢 redbrogdon，该项目受 rebloc 项目的启发。

安装

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

dependencies:
  agility_redux: ^版本号

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

使用示例

创建一个简单的 Redux Store

import 'package:agility_redux/agility_redux.dart';

// 定义状态类
class CounterState {
  int count;

  CounterState({required this.count});
}

// 定义动作类
class IncrementAction extends ReduxAction<CounterState> {
  [@override](/user/override)
  CounterState reduce() {
    return CounterState(count: state.count + 1);
  }
}

// 定义 Store
final store = Store<CounterState>(
  initialState: CounterState(count: 0),
  reducer: (state, action) {
    if (action is IncrementAction) {
      return CounterState(count: state.count + 1);
    }
    return state;
  },
);

使用 agility_redux_widget 构建 UI

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

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

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

class CounterPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Agility Redux Example')),
      body: Center(
        child: Selector<CounterState, int>(
          selector: (context, state) => state.count,
          builder: (context, count, child) {
            return Text('Count: $count');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          store.dispatch(IncrementAction());
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

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

1 回复

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


agility_redux_widget 是一个基于 Redux 的 Flutter 状态管理插件，它提供了一种简单且高效的方式来管理应用的状态。Redux 是一种单向数据流架构，通过集中管理应用的状态，使得状态变化更加可预测和易于调试。

安装

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

dependencies:
  flutter:
    sdk: flutter
  agility_redux_widget: ^0.0.1

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

基本概念

  1. State: 应用的状态，通常是一个不可变的数据结构。
  2. Action: 描述状态变化的动作，通常是一个简单的类或枚举。
  3. Reducer: 一个纯函数，接收当前状态和一个 Action，返回一个新的状态。
  4. Store: 存储应用的状态，并负责分发 Action 和更新状态。

使用步骤

1. 定义 State

首先，你需要定义应用的状态。例如：

class AppState {
  final int counter;

  AppState({this.counter = 0});

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

2. 定义 Action

接下来，定义一些 Action 来描述状态的变化：

class IncrementAction {}

class DecrementAction {}

3. 定义 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;
}

4. 创建 Store

使用 agility_redux_widget 提供的 createStore 函数来创建 Store：

import 'package:agility_redux_widget/agility_redux_widget.dart';

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

5. 使用 StoreProvider

在应用的顶层使用 StoreProvider 来提供 Store：

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

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

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

6. 使用 StoreConnector

在需要访问状态的组件中，使用 StoreConnector 来连接 Store 和 UI：

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),
          ),
        ],
      ),
    );
  }
}
回到顶部