Flutter状态管理插件flying_redux的使用

Flutter状态管理插件flying_redux的使用

什么是Flying Redux?

Flying Redux是一个基于Redux状态管理的Flutter应用框架。

特性

它有以下四个特点:

  1. 函数式编程
  2. 可预测的状态容器
  3. 可插拔的组件化
  4. 支持null安全和flutter 3.x

入门指南

使用计数器作为示例,以下是五个步骤:

添加flying_redux包

pubspec.yaml文件中添加依赖:

dependencies:
  flying_redux: ^x.x.x

创建一个状态类并初始化状态

/// 状态类
class PageState extends Cloneable<PageState> {
  late int count;

  @override
  PageState clone() {
    return PageState()..count = count;
  }
}

/// 初始化状态
PageState initState(Map<String, dynamic>? args) {
  return PageState()..count = 0;
}

定义Action和创建ActionCreator

/// Action
enum CounterAction { increment }

/// ActionCreator
class CounterActionCreator {
  static Action increment() {
    return const Action(CounterAction.increment, payload: 1);
  }
}

创建修改状态的Reducer函数

/// Reducer
buildReducer() {
  return asReducer(<Object, Reducer<PageState>>{
    CounterAction.increment: _increment,
  });
}

PageState _increment(PageState state, Action action) {
  final int num = action.payload;
  return state.clone()..count = (state.count + num);
}

创建视图和页面

/// 页面
class CountPage extends Page<PageState, Map<String, dynamic>> {
  CountPage()
      : super(
          initState: initState,
          reducer: buildReducer(),
          view: (PageState state, Dispatch dispatch, ComponentContext<PageState> ctx) {
            return Scaffold(
              body: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text(
                      'You have pushed the button this many times:',
                    ),
                    Text(state.count.toString()),
                  ],
                ),
              ),
              floatingActionButton: FloatingActionButton(
                onPressed: () => dispatch(CounterActionCreator.increment()),
                tooltip: 'Increment',
                child: const Icon(Icons.add),
              ),
            );
          },
        );
}

使用示例

如果你想要查看具体的使用示例,请参阅示例项目中的待办事项列表代码,位于/example文件夹中。

运行示例

cd ./example
flutter run

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

1 回复

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


当然,flying_redux 是一个用于 Flutter 的状态管理库,它提供了一种结构化的方式来管理应用的状态。以下是一个简单的代码示例,展示了如何在 Flutter 应用中使用 flying_redux

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

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

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

接下来,我们将创建一个简单的 Flutter 应用,使用 flying_redux 来管理状态。

1. 定义应用状态

首先,我们定义一个应用状态类。例如,我们有一个简单的计数器应用:

class AppState {
  final int counter;

  AppState({required this.counter});

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

2. 创建动作

接下来,我们定义一些动作,这些动作将用于触发状态更新:

enum AppAction {
  increment,
  decrement,
}

3. 实现 ReduxStore

然后,我们需要实现一个 ReduxStore,它将管理我们的状态并根据动作进行更新:

import 'package:flying_redux/flying_redux.dart';

class AppReduxStore extends ReduxStore<AppState, AppAction> {
  @override
  AppState initialState() {
    return AppState(counter: 0);
  }

  @override
  AppState reducer(AppState state, AppAction action) {
    switch (action) {
      case AppAction.increment:
        return state.copyWith(counter: state.counter + 1);
      case AppAction.decrement:
        return state.copyWith(counter: state.counter - 1);
      default:
        return state;
    }
  }
}

4. 在 Flutter 应用中使用 ReduxStore

最后,我们在 Flutter 应用中使用这个 ReduxStore。我们将创建一个简单的界面,允许用户增加和减少计数器:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flying_redux/flying_redux.dart';

void main() {
  final store = AppReduxStore();
  runApp(
    MultiProvider(
      providers: [
        Provider<ReduxStore<AppState, AppAction>>.value(value: store),
      ],
      child: MyApp(),
    ),
  );
}

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

class MyHomePage extends StatelessWidget {
  final ReduxStore<AppState, AppAction> store = Provider.of<ReduxStore<AppState, AppAction>>(context);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${store.state.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => store.dispatch(AppAction.increment),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(width: 10),
          FloatingActionButton(
            onPressed: () => store.dispatch(AppAction.decrement),
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

注意:在 MyHomePage 类中,我们通过 Provider.of<ReduxStore<AppState, AppAction>>(context) 获取 ReduxStore 实例。为了正确获取这个实例,我们需要在 MyApp 的根 MaterialApp 上方使用 MultiProvider 来提供 ReduxStore

以上代码展示了如何使用 flying_redux 进行状态管理。通过这种方式,你可以将应用的状态与界面分离,使代码更加清晰和可维护。

回到顶部