fish-redux 之 dio 基础使用

• Flutter http请求库dio介绍

• fish-redux之 adapter基础使用

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

代码示例如下

• 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请求，发送信号为didFeatchServiceHepher.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> {@overrideWidget build(BuildContext context) {return WebviewScaffold(url: widget.webUrl,appBar: AppBar(title: Text(widget.webTitle),),);}
}

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