Flutter异步状态管理插件redux_future_middleware的使用

Flutter 异步状态管理插件 redux_future_middleware 的使用

简介

Redux Future Middleware 是一个用于处理 Dart Futures 的 Redux 中间件包。通过创建一个 FutureAction，该中间件可以拦截并处理异步操作。

使用步骤

1. 创建 AppState AppState 类用于存储应用程序的当前状态。

   class AppState {
     String value;
     String loadingValue;
   }
   

2. 定义 Action 定义一个独特的 Action 来标识每个 FutureAction。

   class ExampleAction {}
   

3. 创建 Reducer 创建一个 Reducer 来处理未来的动作。

   AppState exampleReducer(AppState prevState, dynamic action) {
     if (action is FuturePendingAction<ExampleAction>) {
       return prevState..loadingValue = 'Fetching';
     } else if (action is FutureSucceededAction<ExampleAction, String>) {
       return prevState..value = action.payload..loadingValue = 'Done';
     } else if (action is FutureFailedAction<ExampleAction>) {
       return prevState..loadingValue = 'Failed';
     }
   
     return prevState;
   }
   

4. 创建 Store 创建一个包含 futureMiddleware 的 Store。它将拦截所有被分发的 FutureAction。

   final store = Store<AppState>(
     exampleReducer,
     middleware: [futureMiddleware],
   );
   

5. 分发 FutureAction 分发一个 FutureAction 进行拦截。

   store.dispatch(FutureAction<ExampleAction, String>(
     future: Future.value('Hi'),
   ));
   

简化 Reducer 逻辑

该库现在附带了一个 FutureReducer 工具，可以帮助减少在创建处理 FuturePendingAction 和 FutureFailedAction 的 Reducer 时所需的冗余逻辑。

内置默认值

使用内置默认值，上述示例可以简化为：

class AppState extends BaseState<AppState> {
  String value;
}

FutureReducer<AppState, ExampleAction, String> exampleReducer =
  FutureReducer<AppState, ExampleAction, String>(
    successReducer: successReducer,
);

其中 BaseState 类扩展了 FutureState 类，并实现了一些默认行为。

class BaseState extends FutureState<BaseState> {
  String loadingValue;

  [@override](/user/override)
  BaseState updateOnFailed(FutureFailedAction action) => this
    ..loadingValue = "Failed";

  [@override](/user/override)
  BaseState updateOnPending(FuturePendingAction action) => this
    ..loadingValue = "Fetching";
}

自定义默认值

如果您不想使用 FutureState 和内置默认值，可以设置自己的默认 pendingReducer 和 failedReducer。

FutureReducer<AppState, ExampleAction, String> exampleReducer =
  FutureReducer<AppState, ExampleAction, String>(
    successReducer: successReducer,
    pendingReducer: pendingReducer,
    failedReducer: failedReducer,
);

完整示例

以下是一个完整的示例代码，展示了如何使用 redux_future_middleware。

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

// 定义 AppState
class AppState {
  String value;
  String loadingValue;

  AppState(this.value, this.loadingValue);

  AppState copyWith({String? value, String? loadingValue}) {
    return AppState(value ?? this.value, loadingValue ?? this.loadingValue);
  }
}

// 定义 Action
class ExampleAction {}

// 定义 Reducer
AppState exampleReducer(AppState prevState, dynamic action) {
  if (action is FuturePendingAction<ExampleAction>) {
    return prevState.copyWith(loadingValue: 'Fetching');
  } else if (action is FutureSucceededAction<ExampleAction, String>) {
    return prevState.copyWith(value: action.payload, loadingValue: 'Done');
  } else if (action is FutureFailedAction<ExampleAction>) {
    return prevState.copyWith(loadingValue: 'Failed');
  }

  return prevState;
}

void main() {
  final store = Store<AppState>(
    exampleReducer,
    initialState: AppState('', ''),
    middleware: [futureMiddleware],
  );

  runApp(MyApp(store: store));
}

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

  MyApp({required this.store});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return StoreProvider<AppState>(
      store: store,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String? title;

  MyHomePage({this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppState>(
      converter: (store) => store.state,
      builder: (context, state) {
        return Scaffold(
          appBar: AppBar(
            title: Text(title!),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Loading Value:',
                ),
                Text(
                  state.loadingValue,
                  style: Theme.of(context).textTheme.headline4,
                ),
                Text(
                  'Value:',
                ),
                Text(
                  state.value,
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              store.dispatch(FutureAction<ExampleAction, String>(
                future: Future.value('Hello World'),
              ));
            },
            tooltip: 'Fetch Data',
            child: Icon(Icons.refresh),
          ),
        );
      },
    );
  }
}