使用 Redux 在 Flutter& 鸿蒙 next 中实现状态管理

作者：淼.

2025-03-14
北京
本文字数：2861 字
阅读完需：约 9 分钟

在 Flutter 中进行状态管理是开发应用程序时的一个关键问题。Flutter 提供了多种解决方案来管理应用的状态，其中 Redux 是一种广泛使用且功能强大的状态管理库。虽然 Redux 最初是为 JavaScript 和 React 设计的，但它的核心概念非常适用于 Flutter，因此我们可以在 Flutter 中使用 Redux 来高效地管理应用的状态。

什么是 Redux？Redux 是一个专注于“单一状态树”的状态管理模式。它通过三个核心原则来管理应用的状态：

单一数据源：应用的整个状态存储在一个全局的 store 中，而不是分散在各个组件中。状态是只读的：唯一能改变状态的方式是触发一个“动作”（Action）。动作描述了事件的发生，但不直接修改状态。使用纯函数来修改状态：状态的修改是通过 reducers 来完成的，reducer 是一个纯函数，它接收当前状态和动作，返回新的状态。如何在 Flutter 中实现 Redux？在 Flutter 中，使用 Redux 管理状态并不复杂，接下来，我们将从头开始实现一个简单的 Redux 状态管理。

1. 添加依赖

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

dependencies:  flutter:    sdk: flutter  redux: ^5.0.0  flutter_redux: ^0.6.0

复制代码

2. 定义动作（Action）

在 Redux 中，动作是描述要执行什么操作的对象。在 Flutter 中，通常我们会为每个界面或者功能模块定义不同的动作。

例如，在一个计数器应用中，我们可能需要一个增加计数的动作：

class IncrementAction {}class DecrementAction {}

复制代码

3. 定义状态（State）

状态通常是一个包含所有需要管理的数据的对象。在我们的例子中，状态是一个简单的计数器：

class AppState {  final int counter;   AppState({required this.counter});   // 用于创建初始状态  factory AppState.initial() {    return AppState(counter: 0);  }   // 返回新状态的副本  AppState copyWith({int? counter}) {    return AppState(counter: counter ?? this.counter);  }}

复制代码

4. 定义 Reducer

Reducer 是一个纯函数，接收当前状态和一个动作，并返回一个新的状态。在这里，我们为 IncrementAction 和 DecrementAction 定义了 reducer：

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;}

复制代码

5. 创建 Store

Store 是 Redux 中的核心，它持有应用的所有状态，并允许我们通过分发动作来更新状态。在 Flutter 中，我们可以使用 Store 类来创建 Redux Store：

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

复制代码

6. 将 Store 注入到应用中

使用 flutter_redux 库，我们可以将 Redux 的 Store 提供给整个应用。通过 StoreProvider，我们可以在任何需要访问 Store 的地方获取当前的应用状态。

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

复制代码

7. 创建 UI 页面并连接 Store

在页面中，我们需要通过 StoreConnector 来访问 Redux 中的状态并分发动作。StoreConnector 使得我们能够直接从 Redux Store 中读取状态并触发更新。

class CounterPage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return StoreConnector<AppState, _ViewModel>(      converter: (store) => _ViewModel(        counter: store.state.counter,        onIncrement: () => store.dispatch(IncrementAction()),        onDecrement: () => store.dispatch(DecrementAction()),      ),      builder: (context, vm) {        return Scaffold(          appBar: AppBar(title: Text("Redux Counter")),          body: Center(            child: Column(              mainAxisAlignment: MainAxisAlignment.center,              children: <Widget>[                Text('Counter: ${vm.counter}'),                Row(                  mainAxisAlignment: MainAxisAlignment.center,                  children: <Widget>[                    ElevatedButton(                      onPressed: vm.onIncrement,                      child: Text("Increment"),                    ),                    SizedBox(width: 20),                    ElevatedButton(                      onPressed: vm.onDecrement,                      child: Text("Decrement"),                    ),                  ],                ),              ],            ),          ),        );      },    );  }} class _ViewModel {  final int counter;  final VoidCallback onIncrement;  final VoidCallback onDecrement;   _ViewModel({required this.counter, required this.onIncrement, required this.onDecrement});}

复制代码

8. 运行应用

通过上面的步骤，我们就已经将 Redux 成功集成到 Flutter 应用了。现在，应用中的状态将通过 Redux 进行集中管理，任何组件都可以通过分发动作来修改状态，且组件之间的状态管理将变得更加可预测和统一。

代码详细解释动作（Action）：在 Redux 中，动作是事件的描述。我们定义了两个简单的动作 IncrementAction 和 DecrementAction 来增加和减少计数器的值。动作本身没有任何业务逻辑，只是一个标识符。

状态（State）：状态是应用的数据存储。AppState 类包含了一个 counter 字段，用于存储当前的计数值。它还有一个 copyWith 方法，用于创建状态的副本并修改部分字段（这种不可变数据的操作在 Redux 中非常常见）。

Reducer：appReducer 是一个函数，接收当前的状态和一个动作，根据动作的类型来返回新的状态。它是 Redux 中的核心逻辑部分，通过纯函数来处理状态的变更，保证了状态更新的可预测性。

Store：Store 是 Redux 的核心对象，它持有状态并允许我们通过 dispatch 来更新状态。通过将 store 传递给 StoreProvider，我们可以在整个应用中访问 Redux 存储的状态。

StoreConnector 和 UI 连接：StoreConnector 是 Flutter 中用于连接 Redux Store 和 UI 的组件。它通过 converter 属性将 Redux Store 的状态和更新方法转换为 UI 所需的 ViewModel，然后传递给 builder 属性的回调函数。通过这种方式，UI 可以通过 ViewModel 来访问状态和触发动作。总结

Redux 是一种非常强大且灵活的状态管理方案，特别适合需要集中管理大量共享状态的应用。在 Flutter 中使用 Redux 能够让我们的状态管理更加简洁、可维护和可预测，特别是当应用的状态越来越复杂时，Redux 的优势更加突出。通过本文的步骤，你可以轻松地在 Flutter 中实现 Redux 状态管理，并掌握其核心概念。

发布于: 刚刚阅读数: 5

淼.

关注

还未添加个人签名 2022-10-24 加入

还未添加个人简介

发布

暂无评论

创作场景

使用 Redux 在 Flutter& 鸿蒙 next 中实现状态管理

1. 添加依赖

2. 定义动作（Action）

3. 定义状态（State）

4. 定义 Reducer

5. 创建 Store

6. 将 Store 注入到应用中

7. 创建 UI 页面并连接 Store

8. 运行应用

淼.

评论