Flutter Redux 状态管理

最新推荐文章于 2021-07-15 12:28:11 发布

原创最新推荐文章于 2021-07-15 12:28:11 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#flutter #redux #xmpp #状态 #管理

flutter 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了在Xmpp应用中如何使用Redux进行高效的状态管理，包括添加redux_epics依赖、创建State、定义Action、实现Reducer、构建Store以及在组件中接入和使用Store，从而简化消息刷新和红点提示的维护工作。

Xmpp中经常遇到消息刷新,红点刷新,等问题.

消息到处发送,代码也不利于维护,发现有个redux,方便好用,记录下

1 项目中增加 redux_epics: 0.12.0

2 创建State

import 'package:meta/meta.dart';
/**
 * State中所有属性都应该是只读的
 */
@immutable
class CountState{
  int _count;
  get count => _count;

  CountState(this._count);
}

3 创建action

enum Action{
  increment
}

4 创建reducer

CountState reducer(CountState state,action){
  //匹配Action
    if(action == Action.increment){
      return CountState(state.count+1);
    }
    return state;
}

5 创建store

CountState.initState(){ _count = 0;}
 
void main() {
  final store =
      Store<CountState>(reducer, initialState: CountState.initState());
  runApp(new MyApp(store));
}

6 将Store放入顶层

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

  MyApp(this.store);

  @override
  Widget build(BuildContext context) {
    return StoreProvider<CountState>(
      store: store,
      child: new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: TopScreen(),
      ),
    );
  }
}

7 在子页面中获取Store中的state

StoreConnector<CountState,int>(
              converter: (store) => store.state.count,
              builder: (context, count) {
                return Text(
                  count.toString(),
                  style: Theme.of(context).textTheme.display1,
                );
              },
            ),

7 发出action

floatingActionButton: StoreConnector<CountState,VoidCallback>(
        converter: (store) {
          return () => store.dispatch(Action.increment);
        },
        builder: (context, callback) {
          return FloatingActionButton(
            onPressed: callback,
            child: Icon(Icons.add),
          );
        },
      ),