Flutter 入门与实战（五十八）：Flutter如何应用React的 Redux 实现状态管理？

2023-10-11 12:18:40

Flutter 与 React：跨平台开发的利器

在跨平台开发领域，Flutter 和 React 一直是两大佼佼者，以其卓越的性能和丰富的组件库俘获了开发者的心。本文将深入探讨这两款框架，重点介绍如何将 React 的 Redux 状态管理工具无缝集成到 Flutter 应用中。

Flutter 与 React：实力强劲的跨平台开发工具

Flutter ，由 Google 出品，使用 Dart 语言编写，通过将代码编译成原生代码，实现了超乎寻常的运行效率。

React ，来自 Facebook，基于 JavaScript，采用声明式编程，让代码更具简洁性和可读性。

Redux：React 的状态管理利器

Redux 是 React 应用程序的状态管理工具，遵循 Flux 架构模式，助力开发者有效管理组件间状态共享和数据传递。Redux 的核心思想是将应用程序状态集中存储于中央存储库，并通过纯函数进行状态修改，确保应用程序高度可预测和可测试。

在 Flutter 应用中使用 React 的 Redux

借助 "redux_flutter" 插件，开发者能够轻松地将 Redux 集成到 Flutter 应用中。

1. 安装 redux_flutter 插件：

flutter pub add redux_flutter

2. 创建 Redux Store：

Redux store 是存储应用程序状态的中央存储库，可通过 Redux 的 createStore() 方法创建。

final store = createStore(reducer);

3. 将 Redux Store 与 Flutter 应用集成：

redux_flutter 插件提供的 StoreProvider 小部件，可将 Redux store 提供给子组件使用。

return StoreProvider(
  store: store,
  child: MyApp(),
);

4. 在组件中使用 Redux Store：

通过 useSelector() 和 useDispatch() 方法，组件可以获取 Redux store 中的状态和分发 action。

final state = useSelector((state) => state.counter);
final dispatch = useDispatch();

dispatch(incrementCounter());

通过这些步骤，Redux 就被成功集成到 Flutter 应用中，提升了状态管理的便利性，增强了应用程序的可预测性和可测试性。

示例代码：

import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:redux_flutter/redux_flutter.dart';

void main() {
  final store = Store<int>(
    (state, action) => action == IncrementCounterAction ? state + 1 : state,
    initialState: 0,
  );

  runApp(MyApp(store: store));
}

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

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

  @override
  Widget build(BuildContext context) {
    return StoreProvider<int>(
      store: store,
      child: MaterialApp(
        title: 'Redux Example',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Redux Example')),
      body: Center(
        child: StoreConnector<int, int>(
          converter: (store) => store.state,
          builder: (context, state) => Text(
            'Count: $state',
            style: TextStyle(fontSize: 30),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => StoreProvider.of<int>(context).dispatch(IncrementCounterAction()),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class IncrementCounterAction {}