Flutter状态管理插件typed_redux的使用

Flutter状态管理插件typed_redux的使用

typed_redux 是 redux 包的一个类型安全版本。它消除了使用 dynamic 类型的情况，使得状态（State）、缩减器（Reducer）和中间件（Middleware）都能够明确知道动作（Action）的类型。

感谢原版包的作者们。

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 typed_redux 进行状态管理。

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

// 定义一个简单的状态类
class CounterState {
  final int count;

  CounterState({required this.count});

  CounterState copyWith({int? count}) {
    return CounterState(count: count ?? this.count);
  }
}

// 定义一个动作类
class IncrementAction {}

class DecrementAction {}

// 定义缩减器
Reducer<CounterState> counterReducer = TypedReducer<CounterState, IncrementAction>(
      (state, action) => state.copyWith(count: state.count + 1),
    ) as Reducer<CounterState>;

counterReducer = TypedReducer<CounterState, DecrementAction>(
      (state, action) => state.copyWith(count: state.count - 1),
    ).update(counterReducer);

// 创建一个 Store
final store = Store<CounterState>(
  counterReducer,
  initialState: CounterState(count: 0),
);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreProvider<CounterState>(
      store: store,
      child: MaterialApp(
        home: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Typed Redux Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            StreamBuilder<int>(
              stream: StoreProvider.of<CounterState>(context).stateStream,
              initialData: store.state.count,
              builder: (context, snapshot) {
                return Text(
                  'Count: ${snapshot.data}',
                  style: TextStyle(fontSize: 24),
                );
              },
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                FloatingActionButton(
                  onPressed: () {
                    store.dispatch(IncrementAction());
                  },
                  child: Icon(Icons.add),
                ),
                FloatingActionButton(
                  onPressed: () {
                    store.dispatch(DecrementAction());
                  },
                  child: Icon(Icons.remove),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 定义状态类:

   class CounterState {
     final int count;
   
     CounterState({required this.count});
   
     CounterState copyWith({int? count}) {
       return CounterState(count: count ?? this.count);
     }
   }
   

   这里定义了一个简单的状态类 CounterState，包含一个计数器变量 count。

2. 定义动作类:

   class IncrementAction {}
   
   class DecrementAction {}
   

   定义了两个动作类 IncrementAction 和 DecrementAction，分别表示增加和减少的操作。

3. 定义缩减器:

   Reducer<CounterState> counterReducer = TypedReducer<CounterState, IncrementAction>(
         (state, action) => state.copyWith(count: state.count + 1),
       ) as Reducer<CounterState>;
   
   counterReducer = TypedReducer<CounterState, DecrementAction>(
         (state, action) => state.copyWith(count: state.count - 1),
       ).update(counterReducer);
   

   使用 TypedReducer 来定义缩减器，根据不同的动作类型来更新状态。

4. 创建 Store:

   final store = Store<CounterState>(
     counterReducer,
     initialState: CounterState(count: 0),
   );
   

   创建一个 Store 实例，用于存储应用的状态。

5. 主应用:

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return StoreProvider<CounterState>(
         store: store,
         child: MaterialApp(
           home: CounterPage(),
         ),
       );
     }
   }
   

   在 main() 函数中启动应用，并使用 StoreProvider 将 Store 提供给整个应用。

6. 展示页面:

   class CounterPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Typed Redux Example'),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               StreamBuilder<int>(
                 stream: StoreProvider.of<CounterState>(context).stateStream,
                 initialData: store.state.count,
                 builder: (context, snapshot) {
                   return Text(
                     'Count: ${snapshot.data}',
                     style: TextStyle(fontSize: 24),
                   );
                 },
               ),
               SizedBox(height: 20),
               Row(
                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 children: [
                   FloatingActionButton(
                     onPressed: () {
                       store.dispatch(IncrementAction());
                     },
                     child: Icon(Icons.add),
                   ),
                   FloatingActionButton(
                     onPressed: () {
                       store.dispatch(DecrementAction());
                     },
                     child: Icon(Icons.remove),
                   ),
                 ],
               ),
             ],
           ),
         ),
       );
     }
   }