详细了解flutter redux的用法与工作原理

站长

2024年06月19日 20:54 · 阅读数 26

Redux 是一种用于管理应用状态的架构模式，在 Flutter 中也得到了广泛的应用。Redux 的核心概念是状态管理，通过一个单一的存储（Store）来存储整个应用的状态，并通过纯函数（Reducer）来描述状态的变化。Redux 的整个工作流是围绕一个单一的状态树来进行的，这样可以让应用的状态变得可预测和可测试。

Redux 的基本用法：

核心概念

Store:
- 存储整个应用的状态树。
- 提供 getState() 方法来获取当前的状态。
- 提供 dispatch(action) 方法来更新状态。
- 提供 subscribe(listener) 方法来注册监听器，当状态发生变化时调用这些监听器。
State:
- 应用中所有状态的集合，是一个不可变对象。
- 每次状态变化都会返回一个新的状态对象。
Action:
- 描述状态变化的对象，是 Store 唯一改变状态的方法。
- 一个普通的 JavaScript 对象，必须包含 type 字段来描述 action 的类型。
- 可以包含其他附加数据来描述状态变化。
Reducer:
- 一个纯函数，接收旧的状态和 action，返回新的状态。
- 描述了 action 如何改变状态树。
Middleware:
- 位于 dispatch action 和 reducer 之间的扩展点。
- 用于处理异步操作、日志记录、崩溃报告、调用接口等。

Redux 工作流

Redux 的工作流可以分为以下几个步骤：

Action:
- 用户在界面上触发事件，比如点击按钮。
- 事件处理函数生成一个 action，并通过 dispatch 方法发送给 Store。
Store:
- Store 接收到 action 后，将其传递给 Reducer 进行处理。
Reducer:
- Reducer 根据 action 的类型和附加数据，计算出新的状态，并返回给 Store。
Store:
- Store 更新状态，并通知所有订阅的监听器状态已经改变。
View:
- 监听器收到通知后，从 Store 获取新的状态，并重新渲染界面。

Flutter Redux 实现

在 Flutter 中，可以使用 flutter_redux 包来实现 Redux。下面是一个简单的例子：

1. 添加依赖

在 pubspec.yaml 文件中添加 flutter_redux 依赖：

yaml
复制代码
dependencies:
  flutter:
    sdk: flutter
  flutter_redux: ^0.8.0
  redux: ^4.0.0

2. 定义 State

定义应用的状态：

dart
复制代码
class AppState {
  final int counter;

  AppState({this.counter = 0});
}

3. 定义 Action

定义描述状态变化的 Action：

dart
复制代码
class IncrementAction {}
class DecrementAction {}

4. 定义 Reducer

定义 Reducer 来处理状态变化：

dart
复制代码
AppState counterReducer(AppState state, dynamic action) {
  if (action is IncrementAction) {
    return AppState(counter: state.counter + 1);
  } else if (action is DecrementAction) {
    return AppState(counter: state.counter - 1);
  }

  return state;
}

5. 创建 Store

创建 Store 并传入初始状态和 Reducer：

dart
复制代码
final store = Store<AppState>(
  counterReducer,
  initialState: AppState(),
);

6. 创建应用程序

使用 StoreProvider 提供 Store，并使用 StoreConnector 连接 Store 和 UI：

dart
复制代码
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

void main() {
  final store = Store<AppState>(
    counterReducer,
    initialState: AppState(),
  );

  runApp(MyApp(store: store));
}

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

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

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

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Redux Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            StoreConnector<AppState, int>(
              converter: (store) => store.state.counter,
              builder: (context, counter) {
                return Text(
                  '$counter',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              StoreProvider.of<AppState>(context).dispatch(IncrementAction());
            },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              StoreProvider.of<AppState>(context).dispatch(DecrementAction());
            },
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

中间件 (Middleware)

中间件用于拦截 action，可以在 action 被 reducer 处理之前进行一些操作，例如异步处理、日志记录、错误处理等。下面是一个简单的异步中间件示例：

dart
复制代码
void loggingMiddleware(Store<AppState> store, dynamic action, NextDispatcher next) {
  print('Dispatching action: $action');
  next(action); // 确保 action 被传递给 reducer
}

final store = Store<AppState>(
  counterReducer,
  initialState: AppState(),
  middleware: [loggingMiddleware],
);

优势

可预测性: 所有状态的变化都是集中式管理的，并且通过纯函数处理，使状态变化可预测。
可测试性: 由于 reducer 是纯函数，输入确定的情况下输出也确定，便于单元测试。
开发工具支持: Redux 拥有强大的开发工具，可以进行时间旅行调试和状态快照。

Redux的工作原理

深入探讨一下 InheritedWidget 在 Flutter Redux 中的工作原理。为了理解这一点，我们需要看一下 InheritedWidget 是如何工作的，以及它在 Redux 状态管理中的角色。

InheritedWidget 工作原理

InheritedWidget 是一个特殊的 Widget，用于在 Widget 树中向下传递数据。当 InheritedWidget 的数据发生变化时，它会通知依赖于它的子 Widget 重新构建。

以下是 InheritedWidget 的基本实现：

dart
复制代码
class MyInheritedWidget extends InheritedWidget {
  final int data;

  MyInheritedWidget({required Widget child, required this.data}) : super(child: child);

  @override
  bool updateShouldNotify(covariant MyInheritedWidget oldWidget) {
    return oldWidget.data != data;
  }

  static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }
}

Redux 中的 `InheritedWidget`

在 Flutter Redux 中，StoreProvider 继承自 InheritedWidget，用于在 Widget 树中传递 Redux 的 Store。当 Store 中的状态发生变化时，依赖于该 InheritedWidget 的子 Widget 将被重新构建，从而使 UI 更新。

`StoreProvider` 实现

dart
复制代码
class StoreProvider<S> extends InheritedWidget {
  final Store<S> store;

  StoreProvider({required Widget child, required this.store}) : super(child: child);

  @override
  bool updateShouldNotify(StoreProvider<S> oldWidget) => store != oldWidget.store;

  static Store<S> of<S>(BuildContext context) {
    final StoreProvider<S>? provider = context.dependOnInheritedWidgetOfExactType<StoreProvider<S>>();
    if (provider == null) {
      throw FlutterError('StoreProvider.of() called with a context that does not contain a Store.');
    }
    return provider.store;
  }
}

工作原理深入分析

创建 StoreProvider:
- StoreProvider 是 InheritedWidget 的子类，用于在 Widget 树中提供 Redux 的 Store。
- 它持有一个 Store 实例，并将其传递给子 Widget。
访问 Store:
- 子 Widget 可以通过 StoreProvider.of(context) 方法访问 Store。
- 这个方法内部调用了 context.dependOnInheritedWidgetOfExactType<StoreProvider<S>>()，这会在 Widget 树中查找最近的 StoreProvider 实例，并将其作为依赖添加到当前的 BuildContext。
状态更新和重建:
- 当 Store 中的状态发生变化时，StoreProvider 并不会直接触发重建。
- 取而代之的是，依赖于 StoreProvider 的子 Widget 会通过 StoreConnector 监听 Store 的变化，并在状态变化时重新构建自身。

`StoreConnector` 实现

StoreConnector 是一个 StatelessWidget，用于将 Store 与 UI 组件连接起来。它通过 StoreProvider 获取 Store，并使用 builder 回调将状态传递给子 Widget。

dart
复制代码
class StoreConnector<S, T> extends StatelessWidget {
  final T Function(BuildContext context, S state) converter;
  final Widget Function(BuildContext context, T viewModel) builder;

  StoreConnector({required this.converter, required this.builder});

  @override
  Widget build(BuildContext context) {
    final Store<S> store = StoreProvider.of<S>(context);
    final T viewModel = converter(context, store.state);

    return builder(context, viewModel);
  }
}

关键部分解析

context.dependOnInheritedWidgetOfExactType:
- 这个方法用于在 Widget 树中查找最近的 InheritedWidget 实例，并将其作为依赖添加到当前的 BuildContext。
- 当这个 InheritedWidget 的数据发生变化时，Flutter 会重新构建依赖它的 Widget。
updateShouldNotify:
- InheritedWidget 的 updateShouldNotify 方法用于判断是否需要通知依赖它的子 Widget 重新构建。
- 在 StoreProvider 中，如果 Store 实例不同，则返回 true，否则返回 false。

工作流程总结

初始化:
- StoreProvider 被放置在 Widget 树的顶层，用于提供 Redux 的 Store。
- Store 被传递给 StoreProvider，并存储在其内部。
组件连接:
- 子组件通过 StoreConnector 连接到 Store，并通过 converter 方法从 Store 的状态中提取所需的数据。
状态变化:
- 当 Store 的状态发生变化时，StoreProvider 不会直接触发重建。
- 取而代之的是，StoreConnector 会在 Store 的状态变化时重新构建其子组件。
重建:
- 依赖于 StoreProvider 的子组件在状态变化时会被重新构建，从而更新 UI。

通过这种方式，Flutter Redux 实现了高效的状态管理，并确保了状态变化时的 UI 更新是可控且高效的。

转载自:https://juejin.cn/post/7381855349463400457