Flutter Redux 状态管理

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

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

image

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),
          );
        },
      ),

到这里,xmpp只需要收到消息,页面就更自动更新

image

更多详解：
喜欢可以加@群号:913934649

简书： https://www.jianshu.com/u/88db5f15770d

csdn：https://me.csdn.net/beyondforme

掘金：https://juejin.im/user/5e09a9e86fb9a016271294a7