Flutter Redux中通过Action展示SnackBar的实现方案咨询

嘿，这个场景我在Flutter Redux开发中经常遇到，给你分享两种实用的实现思路，从基础到优化都有～

核心思路是：API调用完成后，中间件分发带提示信息的Action，Reducer更新State，最后UI层监听State变化显示SnackBar。这种方式适合需要和页面状态联动的场景。

步骤1：定义提示相关的Action #

先创建用于传递成功/错误提示的Action类型：

// 触发API的Action
class FetchDataAction {}

// 成功提示Action
class FetchDataSuccessAction {
  final String message;
  FetchDataSuccessAction(this.message);
}

// 错误提示Action
class FetchDataErrorAction {
  final String errorMessage;
  FetchDataErrorAction(this.errorMessage);
}

// 清除提示的Action（避免重复显示）
class ClearPromptAction {}

步骤2：中间件处理异步API并分发提示Action #

在中间件里完成API调用，根据结果分发对应的提示Action：

Middleware<AppState> apiMiddleware() {
  return (store, action, next) async {
    if (action is FetchDataAction) {
      try {
        // 模拟异步API调用
        final response = await ApiService.fetchData();
        // 先更新数据State
        store.dispatch(UpdateDataAction(response.data));
        // 分发成功提示Action
        store.dispatch(FetchDataSuccessAction('数据更新成功！'));
      } catch (e) {
        // 分发错误提示Action
        store.dispatch(FetchDataErrorAction('更新失败：${e.toString()}'));
      }
    }
    next(action);
  };
}

步骤3：Reducer更新提示状态 #

在Reducer里处理这些提示Action，把提示信息存入State：

AppState appReducer(AppState state, dynamic action) {
  if (action is FetchDataSuccessAction) {
    return state.copyWith(
      successPrompt: action.message,
      errorPrompt: null,
    );
  } else if (action is FetchDataErrorAction) {
    return state.copyWith(
      errorPrompt: action.errorMessage,
      successPrompt: null,
    );
  } else if (action is ClearPromptAction) {
    return state.copyWith(
      successPrompt: null,
      errorPrompt: null,
    );
  }
  // 其他Reducer逻辑...
  return state;
}

步骤4：UI层监听State显示SnackBar #

用StoreConnector连接State，在UI构建后检查提示信息并显示，显示后记得清除提示：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, _ViewModel>(
      converter: (store) => _ViewModel.fromStore(store),
      builder: (context, viewModel) {
        // 利用PostFrameCallback确保UI构建完成后再显示SnackBar
        WidgetsBinding.instance.addPostFrameCallback((_) {
          if (viewModel.successPrompt != null) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text(viewModel.successPrompt!)),
            );
            viewModel.clearPrompt();
          } else if (viewModel.errorPrompt != null) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text(viewModel.errorPrompt!),
                backgroundColor: Colors.redAccent,
              ),
            );
            viewModel.clearPrompt();
          }
        });

        return Scaffold(
          body: Center(
            child: ElevatedButton(
              onPressed: viewModel.fetchData,
              child: const Text('更新数据'),
            ),
          ),
        );
      },
    );
  }
}

// ViewModel封装State和操作
class _ViewModel {
  final String? successPrompt;
  final String? errorPrompt;
  final Function() fetchData;
  final Function() clearPrompt;

  _ViewModel({
    required this.successPrompt,
    required this.errorPrompt,
    required this.fetchData,
    required this.clearPrompt,
  });

  static _ViewModel fromStore(Store<AppState> store) {
    return _ViewModel(
      successPrompt: store.state.successPrompt,
      errorPrompt: store.state.errorPrompt,
      fetchData: () => store.dispatch(FetchDataAction()),
      clearPrompt: () => store.dispatch(ClearPromptAction()),
    );
  }
}

如果只是简单的全局提示，不想把提示信息存入State，可以用全局ScaffoldMessengerKey直接在中间件里显示SnackBar，更简洁。

步骤1：定义全局ScaffoldMessengerKey #

final GlobalKey<ScaffoldMessengerState> globalScaffoldKey = GlobalKey<ScaffoldMessengerState>();

步骤2：在MaterialApp中配置这个Key #

MaterialApp(
  scaffoldMessengerKey: globalScaffoldKey,
  title: 'Redux SnackBar Demo',
  home: HomePage(),
);

步骤3：中间件直接显示SnackBar #

Middleware<AppState> apiMiddleware() {
  return (store, action, next) async {
    if (action is FetchDataAction) {
      try {
        final response = await ApiService.fetchData();
        store.dispatch(UpdateDataAction(response.data));
        // 直接显示成功提示
        globalScaffoldKey.currentState?.showSnackBar(
          const SnackBar(content: Text('数据更新成功！')),
        );
      } catch (e) {
        // 直接显示错误提示
        globalScaffoldKey.currentState?.showSnackBar(
          SnackBar(
            content: Text('更新失败：${e.toString()}'),
            backgroundColor: Colors.redAccent,
          ),
        );
      }
    }
    next(action);
  };
}

• State联动方式：适合需要在特定页面显示提示，或者提示后需要同步更新页面内容的场景，遵循Redux单向数据流的规范。
• 全局Key方式：适合通用的全局提示，逻辑简单，不需要污染State，开发效率更高。

内容的提问来源于stack exchange，提问作者Vikas