Flutter + Dio + Fish_Redux
目前網上只有單個的介紹，沒有整合使用的demo，那就由我來吧。要給我點星星啊！！！
程式碼地址： github.com/liangwei010…
本次將實現的介面如下：
之前做的一個管理端介面(spring boot + vue )資料，下圖網址為：http://101.132.124.171:8000/about
看完能懂啥？
看完能大概知道目錄結構，Dio基礎請求的封裝， Fish_Redux狀態的使用，和一些亂七八糟的坑。筆者也是差不多摸石頭過河，這些天也是踩了一些坑。
選型
因為組人員有限，所以沒有過多的精力去維護一套IOS和Android程式碼。經過和組裡的人員套論以後，決定放棄選用React Native，選用Flutter。因為組人人員都是React Native和Flutter都沒有接觸過，差不多都是從0開始，然後覺得Flutter可能是以後的趨勢，效能還行，就開始搞了。
搭環境
此處省略一萬字，按Flutter官網來即可：Flutter中文網。
專案結構
- api 用來存放和後端介面請求
- apiModel 用來存放後端返回的json對應的model物件集合
- asset 用來存放一些例如圖片啥的資源
- component 為能抽出來的單個的元件的集合
- page 為單個的頁面的集合
- utils 為功能的方法和類的集合
- pubspec.yaml是管理包的地方
demo需要用的依賴包
dependencies:
json_annotation: ^2.4.0 # json序列化和反序列化用的
dio: ^2.1.7 # http請求用的
fish_redux: ^0.2.2 # 狀態管理用的
flutter:
sdk: flutter
# 開發環境的依賴
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: ^1.5.2 # 開發時生成model用的
json_serializable: ^3.0.0 # json序列化和反序列化用的
複製程式碼為啥要使用狀態管理
- 為了View(介面)和VM(邏輯)解耦。
- 為了程式碼的可維護性。
- 為了以後的可擴充套件性。
使用 fish_redux前戲
- 在狀態管理的選型中，有bloc和redux，後面選了阿里的 fish_redux。一是因為相信阿里的團隊，二是看了他們的狀態管理和其他的對比（狀態管理對比），三是它的星星是最多的。
- 官方推出了一個外掛：FishReduxTemplate，分別有vscode 和Android studio，不過Android studio建立了檔案以後，過許久以後才會重新整理，有點小慢。
- 開始有點不是很理解他的意思，接觸和看文件以後發現他的這個和Vuex狀態有點類似。
- 看的知乎上的一個解釋（不知道為啥，翻牆才搜到了知乎的，講的挺好的，為啥某度的搜尋引擎就沒有出來），覺得下面幾個還是很重要的：View、Effect、Reducer元件三要素。 （掘金解釋）、（知乎解釋）
使用Flutter的坑
- fish_redux去github上找官方的example，我是沒有跑起來。是因為我的flutter的版本是1.74的。報錯如下，原因也挺簡單，是因為鹹魚團隊的Action和官方的Action的類名重複了。解決辦法：降級，將flutter版本降至：v1.5.4-hotfix.2及以下。
Error: 'Action' is imported from both 'package:flutter/src/widgets/actions.dart' and 'package:fish_redux/src/redux/basic.dart'.
複製程式碼- fish_redux 建立以後effect檔案報錯，錯誤如下。
The function '_onAction' has type 'void Function(Action, Context<DemoState>)' that isn't of expected type 'dynamic Function(dynamic, Context<DemoState>)'. This means its parameter or return type does not match what is expected.
複製程式碼-
在開始模式呼叫API的時候，遇上一個大坑，因為之前做JAVA 、C#、Vue居多，移動端偏少，然後在使用Dio封裝後，開始連線後臺API，報錯。原因也是找了一會，是因為，我自己開的後臺去除錯的，開的node的後臺和java的後臺都不行，BaseUrl寫的是：localhost，後面看見有大兄弟說，linux系統下，本機被對映的埠是啥10.20啥的，我猜這個dart的底層虛擬機器是linux的，我果斷換了遠端的IP的API，立馬來事。
// 錯誤是這個， DioError [DioErrorType.DEFAULT] // 官網的解釋如下 enum DioErrorType { /// Default error type, usually occurs before connecting the server. DEFAULT, } 複製程式碼 -
沒啥文件，很多靠猜和網上的例子。有些不是很理解，也沒有人講解啥的，還是有點痛苦的。
fish_redux幾個重要的概念
-
Action定義一種行為，可以攜帶資訊，發往Store。換言之Store發生改變須由Action觸發，Fish redux 有以下約定：Action 包含兩個欄位type和payload；推薦寫法是在action.dart裡定義一個type列舉類和一個ActionCreator類，這樣有利於約束payload的型別。
-
Reducer/Effect這兩個函式都是用來處理資料的函式，Reducer是純函式響應Action對Store資料進行改變。Effect用來處理來自檢視的意圖，如點選事件，發起非同步請求，這些有副作用的操作。
-
Page可以看成是一個容器，它用來配置聚合State，Effect，Reduce，View，Dependencies等。
-
Adapter（可選），這個不咋懂。
-
view 解耦出來的純頁面。
首先建立一個簡單的頁面
使用鹹魚提供外掛新建後，將出現上圖的檔案。
- action，裡面是定義一些動作，給view或者effect用的。
import 'package:fish_redux/fish_redux.dart';
import '../../../apiModel/user.dart';
//TODO replace with your own action
enum BusinessAction { query }
class BusinessActionCreator {
static Action updateAction(List<User> userList){
print('由effect請求後dispatch的值來了');
return Action(BusinessAction.query, payload: userList);
}
}
複製程式碼- effect 裡頭是一些事件，發起非同步請求等
import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
import '../../../api/user.dart';
Effect<BusinessState> buildEffect() {
return combineEffects(<Object, Effect<BusinessState>>{
Lifecycle.initState: _init,
});
}
void _init(Action action, Context<BusinessState> ctx) {
// Http請求
UserApi.getUser().then((value){
ctx.dispatch(BusinessActionCreator.updateAction(value));
});
}
複製程式碼- page 是配置聚合State，Effect，Reduce，View
import 'package:fish_redux/fish_redux.dart';
import 'effect.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';
class BusinessPage extends Page<BusinessState, Map<String, dynamic>> {
BusinessPage()
: super(
initState: initState,
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
dependencies: Dependencies<BusinessState>(
adapter: null,
slots: <String, Dependent<BusinessState>>{
}),
middleware: <Middleware<BusinessState>>[
],);
}
複製程式碼- reducer 修改值的地方
import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
Reducer<BusinessState> buildReducer() {
return asReducer(
<Object, Reducer<BusinessState>>{
BusinessAction.query: _onQuery,
},
);
}
BusinessState _onQuery(BusinessState state, Action action) {
print('我是值真正更新的地方');
final BusinessState newState = state.clone();
newState.userList = action.payload;
return newState;
}
複製程式碼- state 初始化，存屬性的地方
import 'package:fish_redux/fish_redux.dart';
import '../../../apiModel/user.dart';
class BusinessState implements Cloneable<BusinessState> {
BusinessState({this.userList});
List<User> userList = new List<User>();
@override
BusinessState clone() {
return BusinessState();
}
}
// 初始化
BusinessState initState(Map<String, dynamic> args) {
List<User> tempList = new List<User>();
User user = new User();
user.no = 0;
user.name = '樑二狗';
user.email = '1@qq.com';
tempList.add(user);
return BusinessState(userList: tempList);
}
複製程式碼- view 解耦出來的介面
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'action.dart';
import 'state.dart';
Widget buildView(BusinessState state, Dispatch dispatch, ViewService viewService) {
var buildListView = ListView.builder(
itemCount: state.userList.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: ListTile(
leading: FlutterLogo(),
title: Text('編號:' +
state.userList[index].no.toString() +
'名稱:' +
state.userList[index].name.toString() +
'郵箱:' +
state.userList[index].email.toString()),
),
);
},
);
// 中間頁面的檢視
return Scaffold(appBar: null, body: Center(child: buildListView));
}
複製程式碼Http的封裝
在上面，我們使用的Http請求，是用Dio封裝過一次的，程式碼如下：
import 'package:dio/dio.dart';
import 'dart:io';
import 'dart:async';
/*
* 封裝 restful 請求
*
* GET、POST、DELETE、PATCH
* 主要作用為統一處理相關事務：
* - 統一處理請求字首；
* - 統一列印請求資訊；
* - 統一列印響應資訊；
* - 統一列印報錯資訊；
*/
class HttpUtils {
/// global dio object
static Dio dio;
/// default options
static const String API_PREFIX = 'http://101.132.124.171:8080/demo-1.0/api';
static const int CONNECT_TIMEOUT = 10000;
static const int RECEIVE_TIMEOUT = 3000;
/// http request methods
static const String GET = 'get';
static const String POST = 'post';
static const String PUT = 'put';
static const String PATCH = 'patch';
static const String DELETE = 'delete';
static Future<dynamic> request (
String url,
{ data, method }) async {
data = data ?? {};
method = method ?? 'GET';
/// restful 請求處理
data.forEach((key, value) {
if (url.indexOf(key) != -1) {
url = url.replaceAll(':$key', value.toString());
}
});
Dio dio = createInstance();
/// 列印請求相關資訊：請求地址、請求方式、請求引數
print('請求地址：【' + dio.options.baseUrl + url + '】');
print('請求引數：' + data.toString());
var result;
try {
Response response = await dio.request(url, data: data, options: new Options(method: method));
result = response.data;
/// 列印響應相關資訊
print('響應資料成功！');
} on DioError catch (e) {
/// 列印請求失敗相關資訊
print('請求出錯：' + e.toString());
}
return result;
}
/// 建立 dio 例項物件
static Dio createInstance () {
if (dio == null) {
/// 全域性屬性：請求字首、連線超時時間、響應超時時間
BaseOptions option = new BaseOptions(
baseUrl: API_PREFIX,
connectTimeout: CONNECT_TIMEOUT,
receiveTimeout: RECEIVE_TIMEOUT,
headers: {
"user-agent": "dio",
"api": "1.0.0"
},
contentType: ContentType.JSON,
// Transform the response data to a String encoded with UTF8.
// The default value is [ResponseType.JSON].
responseType: ResponseType.plain
);
dio = new Dio(option);
}
return dio;
}
/// 清空 dio 物件
static clear () {
dio = null;
}
}
複製程式碼json 字串解析
在上面http中，我們的資料為json陣列，資料如下，我們使用 json_serializable 將json串轉化成List陣列。
[{"no":10,"name":"12","email":"12@qq.com"},{"no":11,"name":"11","email":"1@qq.com"},{"no":12,"name":"asdf","email":"asf@asdf.com"},{"no":14,"name":"li","email":"22@qq.com"},{"no":15,"name":"w","email":"1@qq.com"},{"no":16,"name":"樑","email":"17@qq.com"},{"no":17,"name":"李","email":"1@qq.com"},{"no":18,"name":"li","email":"2@qq.com"},{"no":112,"name":"裡","email":"56@qq.com"},{"no":122,"name":"1","email":"1@qq.com"}]
複製程式碼他這個東西還是有點複雜的，沒有java或者C#轉json方便。我們建立對應的Model的檔案user.dart，示例程式碼如下:
import 'package:json_annotation/json_annotation.dart';
part 'user.g.dart';
@JsonSerializable()
class User {
User({this.no, this.name, this.email});
int no;
String name;
String email;
factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
Map<String, dynamic> toJson() => _$UserToJson(this);
}
複製程式碼開始建立檔案的時候，最後兩行會報錯。然後我們使用如下命令列，將會生成一個"user.g.dart"，然後就能使用了。
flutter packages pub run build_runner watch
複製程式碼在json串轉List的時候，找了很久，終於找到啦，這樣寫：
// json 為後臺返回的json陣列串
var usersJson = json.decode(result);
List<User> userList = (usersJson as List).map((i)=>User.fromJson(i)).toList();
複製程式碼就寫到這裡吧。希望能幫到大家哦，還有，記得給我點星星，寫文不容易啊。