reflux

Reflux 是一个用于 React with DartFlutter 的状态管理库。它使用 Dart 的密封类提供完全类型安全的可预测状态容器,支持穷尽模式匹配。

安装

dependencies:
  reflux: ^0.11.0-beta

核心概念

Store

Store 保存应用程序的完整状态树。整个应用应该只有一个 store。

import 'package:reflux/reflux.dart';

final store = createStore(counterReducer, (count: 0));

Actions

Actions 是描述发生了什么的密封类。使用 Dart 的模式匹配来匹配实际的类型,而不是字符串。

sealed class CounterAction extends Action {}

final class Increment extends CounterAction {}
final class Decrement extends CounterAction {}
final class SetValue extends CounterAction {
  const SetValue(this.value);
  final int value;
}

Reducers

Reducers 是纯函数,指定状态如何响应 actions 而改变。

typedef CounterState = ({int count});

CounterState counterReducer(CounterState state, Action action) =>
    switch (action) {
      Increment() => (count: state.count + 1),
      Decrement() => (count: state.count - 1),
      SetValue(:final value) => (count: value),
      _ => state,
    };

快速开始

import 'package:reflux/reflux.dart';

// 使用记录类型定义状态
typedef CounterState = ({int count});

// 使用密封类定义 Actions
sealed class CounterAction extends Action {}
final class Increment extends CounterAction {}
final class Decrement extends CounterAction {}

// 使用模式匹配的 Reducer
CounterState counterReducer(CounterState state, Action action) =>
    switch (action) {
      Increment() => (count: state.count + 1),
      Decrement() => (count: state.count - 1),
      _ => state,
    };

void main() {
  final store = createStore(counterReducer, (count: 0));

  store.subscribe(() => print('Count: ${store.getState().count}'));

  store.dispatch(Increment()); // Count: 1
  store.dispatch(Increment()); // Count: 2
  store.dispatch(Decrement()); // Count: 1
}

中间件

中间件提供了在分发 action 和 reducer 之间的第三方扩展点。

Middleware<CounterState> loggerMiddleware() =>
    (api) => (next) => (action) {
          print('Dispatching: ${action.runtimeType}');
          next(action);
          print('State: ${api.getState()}');
        };

final store = createStore(
  counterReducer,
  (count: 0),
  enhancer: applyMiddleware([loggerMiddleware()]),
);

选择器

选择器从状态中提取和记忆化派生数据。

final getCount = createSelector1(
  (CounterState s) => s.count,
  (count) => count * 2,
);

final doubledCount = getCount(store.getState());

时间旅行

TimeTravelEnhancer 允许您撤销/重做状态更改。

final timeTravel = TimeTravelEnhancer<CounterState>();

final store = createStore(
  counterReducer,
  (count: 0),
  enhancer: timeTravel.enhancer,
);

store.dispatch(Increment());
store.dispatch(Increment());

timeTravel.undo(); // 后退一步
timeTravel.redo(); // 前进一步

API 参考

请参阅完整 API 文档了解所有可用函数和类型。

源代码

源代码可在 GitHub 上获取。