Flutter redux 和 flutter_redux 详解

Flutter的很多灵感来自于React，它的设计思想是数据与视图分离，由数据映射渲染视图。所以在Flutter中，它的Widget是immutable的，而它的动态部分全部放到了状态(State)中。

Redux

Redux是一种单向数据流架构，可以轻松开发，维护和测试应用程序
flutter_redux是用来简化redux的使用

image

• 我们在Redux中，所有的状态都储存在Store里。这个Store会放在App顶层
• View拿到Store储存的状态(State)并把它映射成视图。
• Redux让我们不能让View直接操作数据，而是通过发起一个action来告诉Reducer，状态得改变啦
• 这时候Reducer接收到了这个action，他就回去遍历action表，然后找到那个匹配的action，根据action生成新的状态并把新的状态放到Store中
• Store丢弃了老的状态对象，储存了新的状态对象后，就通知所有使用到了这个状态的View更新
• 能够同步不同view中的状态

使用

①添加依赖

redux: ^3.0.0
flutter_redux: ^0.5.3

②创建State

状态是由reducer生成并储存在Store里面的。Store更新状态的时候，并不是更改原来的状态对象，而是直接将reducer生成的新的状态对象替换掉老的状态对象。所以，我们的状态应该是immutable的。

import 'package:meta/meta.dart';
@immutable
class CountState {
  final int _count;
  get count => _count;
  CountState(this._count);
  CountState.initState() : _count = 0;
}

③创建action

action只是我们对状态进行操作方法的一个代号而已。在我们这个应用中，唯一的一个功能就是让count的值+1，所以我们这里只有一个action

/**
 * 定义操作该State的全部Action
 * 这里只有增加count一个动作
 */
enum Action{
  increment
}

④创建reducer

reducer是我们的状态生成器，它接收一个我们原来的状态，然后接收一个action，再匹配这个action生成一个新的状态。

/**
 * reducer会根据传进来的action生成新的CountState
 */
CountState reducer(CountState state,action){
  //匹配Action
    if(action == Action.increment){
      return CountState(state.count+1);
    }
    return state;
}

⑤创建store

我们想用Redux管理全局的状态的话，需要将store储存在应用的入口才行。而在应用打开时要先初始化一次应用的状态。所以在State中添加一个初始化的函数。

//应用顶层
void main() {
  final store =
      Store<CountState>(reducer, initialState: CountState.initState());
  runApp(new MyApp(store));
}

⑥将Store放入顶层

flutter_redux提供了一个很棒的widget叫做StoreProvider，它的用法也很简单，接收一个store，和child Widget。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final Store<CountState> store;
  MyApp({Key key, this.store}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return StoreProvider<CountState>(
      store: store,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        initialRoute: '/',
        routes: {
          "/": (context) => InitPage(),
          "/task": (context) => TaskPage(),
          "/medal": (context) => MedalPage(),
          "/rank": (context) => RankPage(),
        },
         home: RootPage(),
      ),
    );
  }
}

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

要想获取store我们需要使用StoreConnector<S,ViewModel>。StoreConnector能够通过StoreProvider找到顶层的store。而且能够在state发生变化时rebuilt Widget。

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