Flutter 状态管理与Redux集成插件provider_for_redux的使用

provider_for_redux简介

provider_for_redux 是一个Flutter插件，它允许你使用Provider来替代AsyncRedux中的StoreProvider，从而简化状态管理。这使得你可以通过Provider访问Redux store、state以及dispatch方法。

使用方法

替换StoreProvider

在传统的方式中，我们会使用StoreProvider将Redux store提供给应用。现在，你可以用AsyncReduxProvider来替换它，并且不再需要连接器(widgets)。

@Override
Widget build(BuildContext context) =>
    AsyncReduxProvider<AppState>.value(
        value: store,
        child: MaterialApp(
          home: MyHomePage(), // Instead of MyHomePageConnector.
        ));

访问store、state和dispatch

使用Provider.of可以轻松获取store、state和dispatch方法：

• Provider.of<Store<AppState>>(context) 获取store。
• Provider.of<AppState>(context) 获取state。
• Provider.of<Dispatch>(context, listen: false)(IncrementAndGetDescriptionAction()) 获取并调用dispatch方法。

完整示例

下面是一个完整的例子，展示了如何创建一个简单的计数器应用：

import 'package:async_redux/async_redux.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_for_redux/provider_for_redux.dart';

import 'actions.dart';
import 'app_state.dart';

late Store<AppState> store;

void main() {
  var state = AppState.initialState();
  store = Store<AppState>(initialState: state);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => AsyncReduxProvider<AppState>.value(
        value: store,
        child: const MaterialApp(home: MyHomePage()),
      );
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  int? counter(BuildContext ctx) => Provider.of<AppState>(ctx).counter;

  String description(BuildContext ctx) => Provider.of<AppState>(ctx).description;

  VoidCallback onIncrement(BuildContext ctx) =>
      () => Provider.of<Dispatch<AppState>>(ctx, listen: false)(IncrementAndGetDescriptionAction());

  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
        appBar: AppBar(title: const Text('Increment Example (1)')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("You've pushed the button:"),
              Text('${counter(ctx)}', style: const TextStyle(fontSize: 30)),
              Text(description(ctx), style: const TextStyle(fontSize: 15)),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: onIncrement(ctx),
          child: const Icon(Icons.add),
        ));
  }
}

Consumer 和 Selector

除了直接使用Provider.of外，还可以使用Consumer或Selector来更高效地读取store中的数据。特别是当涉及到复杂的UI更新逻辑时，这些工具能帮助减少不必要的重建。

• Consumer：可以直接消费store中的数据。
• Selector：选择性地监听store中的某些部分，避免不必要的widget重绘。

例如，使用ReduxSelector：

return ReduxSelector<AppState, dynamic>(
  selector: (context, state) => [state.counter, state.description],
  builder: (context, store, state, dispatch, model, child) => 
    Scaffold(
      appBar: AppBar(title: Text('Increment Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("You've pushed the button:"),
            Text('${state.counter}', style: TextStyle(fontSize: 30)),
            Text('${state.description}', style: TextStyle(fontSize: 15)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => dispatch(IncrementAndGetDescriptionAction()),
        child: Icon(Icons.add),
      ),
    ),
);

这段代码展示了如何利用ReduxSelector来优化性能，同时保持简洁易懂的代码结构。希望这对理解provider_for_redux有所帮助！