fish-redux 之 dio 基础使用

• Flutter http请求库dio介绍

• fish-redux之 adapter基础使用

正常我们使用dio处理网络请求时，都是放在init方法中进行实现，那么在fish_redux中如何拿到init方法呢，其实无论是在effect或者reducer中我们都可以通过注册监听对象Lifecycle.initState拿到对应的init回调，不过笔者认为，对于reducer应该是处理state相关的数据，相反的effect处理非state事件，因此在effect 中注册对应方法，处理网络请求

实现效果

Untitled4.gif

代码示例如下

• service网络请求

class Service {
  static Dio dio = Dio(BaseOptions(
      connectTimeout: 30000,
      receiveTimeout: 30000,
      baseUrl: API.base_url,
      contentType: ContentType.parse(
          "application/x-www-form-urlencoded; charset=utf-8")));

  static Future<T> post<T>(
    String path, {
    data,
    Map<String, dynamic> queryParameters,
    Options options,
    CancelToken cancelToken,
    ProgressCallback onSendProgress,
    ProgressCallback onReceiveProgress,
  }) {
    return dio
        .post<T>(path,
            queryParameters: queryParameters,
            options: options,
            data: data,
            cancelToken: cancelToken,
            onSendProgress: onSendProgress,
            onReceiveProgress: onReceiveProgress)
        .then((value) => value.data);
  }
}

class ServiceHepher {
  static Future<ExampleModel> getExampleList() =>
      Service.post(API.home_list).then((json) => ExampleModel.fromJson(json));
}

• effect 网络请求处理

Effect<DioTestState> buildEffect() {
  return combineEffects(<Object, Effect<DioTestState>>{
    DioTestAction.action: _onAction,
    DioTestAction.onOpenWeb: _onOpenWeb,
    Lifecycle.initState: _init,
  });
}

void _onAction(Action action, Context<DioTestState> ctx) {}

void _onOpenWeb(Action action, Context<DioTestState> ctx) {
  final Items item = action.payload;
  Routers.openWeb(ctx.context, item.url, item.title);
}

void _init(Action action, Context<DioTestState> ctx) {
  //为封装好的post请求，发送信号为didFeatch
  ServiceHepher.getExampleList().then(
      (value) => ctx.dispatch(DioTestActionCreator.didFeatchAction(value)));
}

• reducer 刷新state

Reducer<DioTestState> buildReducer() {
  return asReducer(
    <Object, Reducer<DioTestState>>{
      DioTestAction.action: _onAction,
      DioTestAction.didFeatch: _didFeatchAction,
    },
  );
}

DioTestState _onAction(DioTestState state, Action action) {
  final DioTestState newState = state.clone();
  return newState;
}

//接收信号为didFeatch
DioTestState _didFeatchAction(DioTestState state, Action action) {
  final ExampleModel model = action.payload;
  final DioTestState newState = state.clone();
  newState.beans = model.data;
  return newState;
}

扩展一下代码中使用的webview控件

• flutter_webview_plugin

• 使用方法示例

class WebPage extends StatefulWidget {
  final String webUrl;
  final String webTitle;
  WebPage({this.webUrl, this.webTitle});

  @override
  _WebPageState createState() => _WebPageState();
}

class _WebPageState extends State<WebPage> {
  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: widget.webUrl,
      appBar: AppBar(
        title: Text(widget.webTitle),
      ),
    );
  }
}

• 例子只是展示web作用，传入对应url即可