flutter 中 redux_thunk

开发中经常网络请求数据,而这些数据一般是耗时操作,而耗时操作一般我们都会放在异步操作.比如最常见的一个场景:请求列表数据,异步拿到列表数据然后刷新UI列表.这时候遇到一个问题网络请求不是瞬发的需要等待一会儿,等待这段时间怎么处理?所有移动端开发经验的伙伴可能会脱口而出,写一个闭包啊,在闭包中进行回调.对,redux中也给我我们提供了一个这样的机制,可以让我们轻松的获取异步或者延时的数据这个东西就是redux_thunk.前端的伙伴叫他中间件

因为之前写移动端对redux并不是很熟悉,网上搜索redux_thunk也是只言片语,大致都是在说延迟一会执行这类话然后一笔带过所以更加理解不上去,这个东西到底是干嘛的.后来我翻阅了# reduxjs/redux-thunk
发现例子中有这么一段代码

// calculation of 1 + 2 is immediate
// x === 3
let x = 1 + 2;
// calculation of 1 + 2 is delayed
// foo can be called later to perform the calculation
// foo is a thunk!
let foo = () => 1 + 2;

写着这么几个注释,foo is a thunk!有种恍然大悟的感觉之前一篇文章我简单的介绍了redux我们想触发一个action我们要编写一个Reducer会立即改变State进行改变,这个时候我们不想立即改变状态,或者说这个时候我们没拿到想要数据不具备改变状态的情况.我们想拿到数据后再改变状态这个时候我们就要用到中间件了.

中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。

理解了以后我们废话多说直接上代码,我们模拟一次网络延时操作,然后利用中间件,在拿到数据后展示相应的UI

首先我们引用一下文件给我们的Store添加一个middleware

import 'package:redux_thunk/redux_thunk.dart';

void main() {
  final store =
  Store<CountState>(reducer, initialState: CountState.initState(),middleware:[thunkMiddleware] );
  runApp(MyApp(store: store));
}

照例我们点进去看一下这个thunkMiddleware是什么

dynamic thunkMiddleware<State>(
  Store<State> store,
  dynamic action,
  NextDispatcher next,
) {
  if (action is ThunkAction<State>) {
    return action(store);
  } else if (action is CallableThunkAction<State>) {
    return action.call(store);
  } else {
    return next(action);
  }
}

一时半会看不出所以然但是可以看到他有一个Store和一个dynamic修饰的action证明这个action可以是很多类型,后面对action进行了if判断action不一样然后的内容也不一样

这个时候我们就可以定义一个ThunkAction,在这个ThunkAction中我们拿到store并在store.dispatch()执行前,做一些我们想做的事情首先我们先定义一个文件,文件里有我们需要的Action

//触发action拿到我们想要的数据数据这个是一个字符串列表
class GetDataAction {
  List<String> list;
  GetDataAction(this.list);
}

//列表点击后要执行的action
class ClickItemAction {
  String Click;
  ClickItemAction(this.Click);
}

有了要执行的动作,我们需要定义State,这里看了掘金
Windin大神写的相关资料,更加深了我的理解,一般我们需要声明一个类,作为整个应用的状态,但是不同界面也有很多小的状态,比如列表有选中未选中这种小状态,我们可以把这些小状态当成成员变量加入整个AppState中来进行使用

import 'dart:collection';

class AppState {
  ListState listState;

  AppState(this.listState);

  factory AppState.initial() {
    // 对于存在多个页面State情况，
    // 可以通过AppState(ListState.initial()， ListState2.initial()， ListState3.initial())这样的形式添加
    return AppState(ListState.initial());
  }
}

class ListState {
  bool _init = false; // 列表初始化标志
  List<String> _list = []; // 列表数据
  String _selected = ''; // 选中的列表项

  ListState(this._init, this._list, this._selected);

  factory ListState.initial() {
    return ListState(false, [], "未选中");
  }

  bool get isInit => _init;

  UnmodifiableListView<String> get list => UnmodifiableListView(_list);

  String get selected => _selected;
}

这个时候我们来编写相对应的执行函数,就是Reducer,和 State 一样，reducer 也分为应用的 app_reducer 和列表页面的 list_reducer。

AppState appReducer(AppState state, dynamic action) {
  // 对于存在多个页面Reducer情况，
  // 可以通过AppState(listReducer(state.listState, action), listReducer2(state.listState2, action), listReducer3(state.listState3, action))这样的形式添加
  return AppState(listReducer(state.listState, action));
}
ListState listReducer(ListState pre, dynamic action) {
  if (action is GetDataAction) {
    return ListState(true, action.list, pre.selected);
  }
  if (action is ClickItemAction) {
    return ListState(pre.isInit, pre.list, action.Click);
  }
  return pre;
}

因为我们引入了中间件这个时候我们来编写ThunkAction

ThunkAction<AppState> fetchList = (Store<AppState> store) async {
  // 模拟网络请求
  await Future.delayed(Duration(milliseconds: 5000));
  var list = [
    "1. ",
    "2. ",
    "3. ",
    "4.",
    "5.",
    "6.",
    "7. ",
    "8. ",
    "9.",
    "10."
  ];
  store.dispatch(GetDataAction(list));
};

下面我们编写一下列表页列表页应该有两个状态,一个是没有数据时我们简单展示一个文字正在加载中,数据来了以后我们加载列表

class ListPage extends StatefulWidget {
  @override
  ListPageState createState() => ListPageState();
}

class ListPageState extends State<ListPage> {
  @override
  Widget build(BuildContext context) {
    buildLoad() {
      return Center(
        child: Text("正在加载中..."),
      );
    }
    buildList(list) {
      return ListView.builder(
          physics:
          BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
          itemCount: list.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(list[index]),
              onTap: () {
                var store = StoreProvider.of<AppState>(context);
                store.dispatch(ClickItemAction(list[index]));
                // 返回到上一级页面
                Navigator.pop(context);
              },
            );
          });
    }
    return Scaffold(
        appBar: AppBar(
          title: Text("List"),
        ),
        body: StoreConnector<AppState, ListState>(
          // 初始化时加载列表
            onInit: (store) {
              if (!store.state.listState.isInit) {
                store.dispatch(fetchList);
              }
              // 将store中的state转化为viewModel
            }, converter: (store) {
          // todo return view model
          return store.state.listState;
          // 通过viewModel更新界面
        }, builder: (contxet, state) {
          // 根据状态显示界面
          if (!state.isInit) {
            // 显示loading界面
            return buildLoad();
          } else {
            // 显示列表界面
            var list = state.list;
            return buildList(list);
          }
        }));;
  }
}

然后我们就能在StoreConnector拿到我们相应状态,我们在 store.dispatch();执行了我们定义的ThunkAction在数据刷新后列表会自动更新

最后

其实很多情况我们不实用redux也有很好的方案,比如我们直接编写闭包因为理解不深我始终觉得redux过于繁琐有种脱裤子放屁的感觉,希望有大神指点1 2更能加深我的理解