flutter状态管理

在flutter中我们都知道StatelessWidget是无状态的，没有提供刷新的方法，但是如果全都用StatefulWidget又感觉很烦每次刷新都要先判断是否更改过在掉一次setState()方法，有时候就想刷新一小块数据，这个时候就可以使用状态管理来改变这些数据，接下来让我们来看看flutter状态管理如何使用吧，先看下效果图：

1554371077264.gif

1. 添加依赖 flutter_redux是更方便我们使用redux

dependencies:
  flutter:
    sdk: flutter
  redux: ^3.0.0
  flutter_redux: ^0.5.2
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

2. 创建一个状态的类

import 'package:meta/meta.dart';

@immutable///代表不可改变
class CountState {
  int _count;

  get count => _count;

  CountState(this._count);

  CountState.initState() {
    _count = 0;
  }
}

3. 创建行为枚举

enum Action{
  addition
}

4. 创建reducer 来进行逻辑处理

CountState reducer(CountState state,action){
  //匹配Action
  switch(action){
    case Action.addition:///当前行为是加法
      return CountState((state.count+1));
    default:
      return state;///没有改变则返回原数据
  }
}

5.在mian函数函数创建Store，将其传给MyApp

void main() {
  final store =
      Store<CountState>(reducer, initialState: CountState.initState());///在这里将reducer这个控制状态改变的方法传入其中
  runApp(MyApp(store));
}

6.在MyApp中进行接收 flutter_redux中提供了一个很方便的Widget

class MyApp extends StatelessWidget {
  final Store<CountState> store;
  MyApp(this.store);
  @override
  Widget build(BuildContext context) {
    return StoreProvider<CountState>(
      store: store,///在这里接收
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: FirstPage(),
      ),
    );
  }
}

7.在任意位置都可以当成一个Widget使用：

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

8.改变状态：

child: StoreConnector<CountState, VoidCallback>(
      converter: (store) {
        return () => store.dispatch(Action.addition);///这里会去调用第四步的reducer方法来达到改变状态的效果
      },
      builder: (context, callback) {///callback 是一个方法
        return FloatingActionButton(
          onPressed: callback,///执行callback方法
          child: Icon(Icons.add),
        );
      },
    ),