本文適合已經入門flutter，沒有了解過Redux，但對Fish-Redux感興趣的同學。
1 Fish-Redux介紹
眾所周知，redux是一個前端的狀態管理框架。
而 Fish-Redux 是阿里閒魚團隊開發的flutter應用框架。用其官方文件的原文描述就是 “Fish Redux 是一個基於 Redux 資料管理的組裝式 flutter 應用框架， 它特別適用於構建中大型的複雜應用。”
1.1 Fish-Redux組成部分
作為沒有前端經驗的小白，初始fish-redux會對各種概念一臉懵逼，下面我們來梳理一下。
page
page代表一個頁面，繼承自 component。它由view（即展示ui的Widget）、state、reducer、effect等組成
state
state用來儲存 page/component（頁面/元件）的狀態，即存放資料。
action
action是我們定義的意圖。我們需要處理某些操作或事件時，通過傳送（dispatch）特定的 action，讓對應action的接收者進行處理。
action包含兩個欄位：
- type：action的型別
- payload：action搭載的引數
reducer
reducer的作用是接收某個意圖（action），然後對資料做出修改，即更新狀態（state）。
effect
effect的用法跟 reducer 類似，但是責任不同。他負責處理“副作用”，這是函數語言程式設計的概念。在這裡簡單地理解為，reducer是負責（state）的更新，effect 負責 state 更新之外的事情。
store
store維持全域性的狀態（state），應用只有一個單一的 store 。
1.2 Fish-Redux流程圖
根據個人的理解，簡單地繪製了下圖 fish_redux_flow.jpg
2 引入Fish-Redux
2.1 建立專案
首先建立一個flutter專案，取名叫fish_demo
這是建立好的預設專案
2.2 引入fish-redux
然後我們引入fish-redux：首先開啟pubspec.yaml檔案，在 dependencies 下面加上 fish_redux: ^0.2.7 ，點選 packages get ，最後檢視結果。 引入fish-redux
3 安裝外掛
fish-redux團隊我們提供了一個外掛，方便我們使用fish-redux，簡化了檔案建立的過程。 外掛名字叫：FishReduxTemplate
外掛安裝成功：
4 建立應用的根 Widget
新建一個 app.dart 用來建立應用的根Widget。 我們定義一個createApp()方法來初始化app的資訊，包括標題、主題、頁面路由。app.dart如下
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
Widget createApp() {
final AbstractRoutes routes = PageRoutes(
pages: <String, Page<Object, dynamic>>{
},
);
return MaterialApp(
title: 'FishDemo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
onGenerateRoute: (RouteSettings settings) {
return MaterialPageRoute<Object>(builder: (BuildContext context) {
return routes.buildPage(settings.name, settings.arguments);
});
},
);
}
複製程式碼然後修改預設的 main.dart，讓其執行我們的app。main.dart如下
import 'package:flutter/material.dart';
import 'app.dart';
void main() => runApp(createApp());
複製程式碼5 第一個fish-redux頁面
首先新建一個 package 命名為 entrance ，表示應用入口介面。
右鍵點選 entrance ----> New ----> FishReduxTemplate ,選擇後彈出視窗如下：
從 page.dart 我們可以看出一個 page 的結構。page.dart如下
import 'package:fish_redux/fish_redux.dart';
import 'effect.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';
class EntrancePage extends Page<EntranceState, Map<String, dynamic>> {
EntrancePage()
: super(
initState: initState,
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
dependencies: Dependencies<EntranceState>(
adapter: null,
slots: <String, Dependent<EntranceState>>{
}),
middleware: <Middleware<EntranceState>>[
],);
}
複製程式碼Entrance 頁面的檢視部分由 view.dart 負責，我們對其進行修改，加一個button進去。view.dart修改後如下。
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'action.dart';
import 'state.dart';
Widget buildView(EntranceState state, Dispatch dispatch, ViewService viewService) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('入口頁面'),
),
body: Container(
child: Center(
child: RaisedButton(
padding: EdgeInsets.fromLTRB(40, 0, 40, 0),
color: Colors.green,
child: Text(
"進入",
style: TextStyle(color: Colors.white),
),
onPressed: () {
//todo 點選事件
}),
),
),
);
}
複製程式碼最後我們將 Entrance 頁面配置到app全域性頁面路由中，並將其設定為 app 預設的 home 頁面。開啟 app.dart：（註釋標記的兩行）
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'entrance/page.dart';
Widget createApp() {
final AbstractRoutes routes = PageRoutes(
pages: <String, Page<Object, dynamic>>{
'entrance_page': EntrancePage(), //在這裡新增頁面
},
);
return MaterialApp(
title: 'FishDemo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: routes.buildPage('entrance_page', null), //把他作為預設頁面
onGenerateRoute: (RouteSettings settings) {
return MaterialPageRoute<Object>(builder: (BuildContext context) {
return routes.buildPage(settings.name, settings.arguments);
});
},
);
}
複製程式碼執行效果如下
下一篇將瞭解更多關於fish-redux的使用。
?如果我的內容對您有幫助，歡迎點贊、評論、轉發、收藏。