Flutter Redux实战指南

原创于 2024-06-22 09:49:35 发布 · 387 阅读

CC 4.0 BY-SA版权

Flutter Redux实战指南

flutter_redux A library that connects Widgets to a Redux Store 项目地址: https://gitcode.com/gh_mirrors/fl/flutter_redux

项目介绍

Flutter Redux 是一个专为 Flutter 设计的库，它简化了在 Flutter 应用中集成 Redux 模式的复杂度，让你能够轻松地将状态管理融入到你的 Flutter 小部件之中。此库支持空安全，并且设计用于与 Redux dart 5.0.0 及以上版本及 Flutter 3.0.0 以上的框架配合工作，提供了诸如 StoreProvider, StoreBuilder, 和 StoreConnector 等小部件来无缝连接你的应用程序状态（Store）与UI层。

项目快速启动

想要立即开始使用 Flutter Redux？首先确保你的 Flutter 环境已经设置好，并安装了必要的依赖。在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_redux: ^0.4.0  # 请检查最新版本并替换这里的版本号

接下来，通过一个简单的计数器示例展示如何开始：

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

// 定义动作类型
enum ActionTypes { increment }

// 简单的还原函数：处理计数动作
int counterReducer(int state, Object action) {
  return action == ActionTypes.increment ? state + 1 : state;
}

void main() {
  final store = Store<int>(counterReducer, initialState: 0);
  
  runApp(
    FlutterReduxApp(
      store: store,
      title: 'Flutter Redux Quick Start',
    ),
  );
}

class FlutterReduxApp extends StatelessWidget {
  final Store<int> store;
  final String title;

  FlutterReduxApp({Key? key, required this.store, required this.title})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreProvider<int>(
      store: store,
      child: MaterialApp(
        title: title,
        home: Scaffold(
          appBar: AppBar(title: Text(title)),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 使用StoreConnector监听变化自动重建UI
                StoreConnector<int, String>(
                  converter: (store) => store.state.toString(),
                  builder: (context, count) {
                    return Text(
                      '点击次数: $count',
                      style: Theme.of(context).textTheme.display1,
                    );
                  },
                ),
                ElevatedButton(
                  onPressed: () =>
                      store.dispatch(ActionTypes.increment),
                  child: Text('增加'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这段代码演示了如何创建一个计数器应用，其中状态通过 Redux 的 Store 来管理，并通过小部件树传递给需要该状态的小部件。