用FishRedux完成一個登陸頁面

[toc]

用FishRedux完成一個登陸頁面

前言

通過不懈的軟磨硬泡以及各類安利...cto終於對Flutter動心了，項目2.15版本將會接入Flutter模塊，😂真的是喜大普奔... 考慮到將來的業務拓展，也是爲了打好一個基礎，我對接下來的flutter module進行了框架選型（實際上是爲了進一步安利，畢竟原生代碼真的寫得好死鬼煩啊...）。 其實目前flutter也沒有什麼特別好的框架，所謂框架，不太像android那樣的mvc,mvp,mvvm那麼成熟，更多的說的是狀態管理。 目前flutter成熟的狀態管理也就三（si）種：

1. scoped_model（或者provide）
2. bloc
3. redux
4. fish_redux

咱們簡單介紹下：

1. scoped_model（或者provide） Google原生的狀態管理，經過封裝InheritedWidget實現了狀態管理，並且一併提現Google的設計思想，單一原則，這個Package僅僅做爲狀態管理來用，幾乎沒有學習成本，若是是小型項目使用，只用Scoped_model來作狀態管理，無疑是很是好的選擇，可是越大的項目，使用scoped_model來作狀態管理，會有點力不從心。
2. bloc 是早期比較流行的一個狀態管理（其實如今也依舊很流行），不過我沒有學習過，它可以很好地支持Stream方式，學習成本相對較高，不過大小項目皆宜。
3. redux 我以前一直使用的一個狀態管理，學習成本較低，和前端框架的redux使用方式類似，若是是前端同窗遷移到flutter，這個狀態管理框架會是一個很好的學習入門方式。
4. fish_redux 這個是咱們這篇文章重點推薦的框架，可是帶來的收益和效果也是最明顯，fish_redux是基於redux封裝，不只僅可以知足狀態管理，更是集成了配置式的組裝項目，Page組裝，Component實現，很是乾淨，易於維護，易於協做沒，將集中、分治、複用、隔離作的更進一步，缺點就是代碼量的急劇增大（並且是很是很是很是急劇增大）

FishRedux指北

FishRedux的gayhub地址爲：FishRedux 咱們clone項目，大體看下目錄結構：

除了通用的global_store以外，頁面大體分爲三種類型：

page

官網上介紹，page（頁面）是一個行爲豐富的組件，由於它的實現是在組件（component）的基礎上加強了aop能力，以及自有的state。 component也有本身的state,可是對比起來，page的具有了**initState()**方法而component沒有。 好比咱們後續的登陸頁面，咱們暫且貼上代碼，後面再作具體說明：

component初始化

login_quick_component代碼

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter_module/page/dialog/component.dart';

import 'effect.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';

class LoginQuickComponent extends Component<LoginQuickState> {
  LoginQuickComponent()
      : super(
          effect: buildEffect(),
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies<LoginQuickState>(
              adapter: null,
              slots: <String, Dependent<LoginQuickState>>{
                'dialog': DialogConner() + CommDialogComponent()
              }),
        );
}
複製代碼

page初始化

login_page代碼

import 'package:fish_redux/fish_redux.dart';

import 'StateWithTickerProvider.dart';
import 'effect.dart';
import 'login_quick/component.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';

class LoginPage extends Page<LoginState, Map<String, dynamic>> {
  @override
  StateWithTickerProvider createState() => StateWithTickerProvider();

  LoginPage()
      : super(
          initState: initState,
          effect: buildEffect(),
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies<LoginState>(
              adapter: null,
              slots: <String, Dependent<LoginState>>{
                "login_quick": QuickConnector() + LoginQuickComponent(),
// "login_normal": QuickConnector() + LoginQuickComponent(),
              }),
          middleware: <Middleware<LoginState>>[],
        );
}
複製代碼

component

*組件(Component)*是 Fish Redux 最基本的元素，其實page也是基於Component的，它與page的不一樣點除了：

1. 沒有本身的initState方法
2. 沒有辦法直接使用，須要使用Connector與父類掛載使用。

adapter

/(ㄒoㄒ)/~~ 哈哈哈，我不要你以爲，我要我以爲！！！！ 看到這裏是否是有點淚流滿面了，通篇不知所云，好不容易看到了一個親切的單詞了... 然而...名字叫適配器，可是和android的用法仍是有區別的。

不過這個我也是在摸索使用中。

頁面具體實現

猶豫不決老是夢，其實上面說了那麼多，我都不知道我在說啥...咱們仍是直接看代碼吧。

頁面展現

這個是咱們具體實現的登陸頁面，我用安卓的行話講就是： 上面一個imageView，下面弄了一個tabLayout，裏面丟了兩個菜單類型：快速登陸和密碼登陸,最底下丟了一個viewpager，裏面丟了兩個fragment。 簡簡單單... 然而，flutter的代碼結構爲：

重點代碼

global_store

其實這塊是照抄demo的，是一個實現切換主題色的小功能，真爽啊！！！，這塊能夠略過不講，很容易看懂。

app.dart

是頁面建立的根，主要用途有：

1. 建立一個簡單的路由，並註冊頁面（也就是咱們頁面的入口和路由配置）
2. 對所需的頁面進行和 AppStore 的鏈接
3. 對所需的頁面進行 AOP 的加強 （這塊還在學習中） 咱們這一塊的留待補充吧，畢竟尚未吃透，也不敢隨便說

分塊講解

基礎先行

一個page（component）咱們能夠看到是由： action,effect,page(component),reducer,state,view這幾個模塊組成的，他們分別的做用，咱們先稍微瞭解下，以便後續的代碼講解：

action

用來定義在這個頁面中發生的動做，例如：登陸，清理輸入框，更換驗證碼框等。 同時能夠經過payload參數傳值，傳遞一些不能經過state傳遞的值。

effect

這個dart文件在fish_redux中是定義來處理反作用操做的，好比顯示彈窗，網絡請求，數據庫查詢等操做。

page

這個dart文件在用來在路由註冊，同時完成註冊effect，reducer，component，adapter的功能。

reducer

這個dart文件是用來更新View，即直接操做View狀態。

state

state用來定義頁面中的數據，用來保存頁面狀態和數據。

view

view很明顯，就是flutter裏面當中展現給用戶看到的頁面。

反正我第一次看是頭暈腦脹的...怎麼這麼多東西，想我年少時，一個.xml和一個.java走天下。 在這裏建議下和我一個弄個記事本，把上面這塊抄上去，寫的時候忘記了就看看。

登陸主界面

由上面的截圖能夠看出，登陸頁面由一個page加一個component組成。 咱們先逐個逐個看代碼，逐個逐個說：

login_state

數據先行，咱們看下state類，這裏比較重要的就是QuickConnector鏈接器了，等到咱們講login_quick的時候再細說：

import 'dart:async';

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_module/global_store/state.dart';

import 'login_quick/state.dart';

class LoginState implements GlobalBaseState, Cloneable<LoginState> {
  // tab控制器
  TabController tabControllerForLoginType;

  // 菜單list
  List<String> loginType = [];

  // 從緩存拿的帳號（可能有用到）
  String accountFromCache;

  // 倒數文字
  String countDownTips;

  // 最大倒數時間
  int maxCountTime;

  // 當前倒數時間
  int currCountTime;

  @override
  LoginState clone() {
    return LoginState()
      ..loginType = loginType
      ..tabControllerForLoginType = tabControllerForLoginType
      ..accountFromCache = accountFromCache;
  }

  @override
  Color themeColor;
}

LoginState initState(Map<String, dynamic> args) {
  LoginState state = new LoginState();
  state.loginType.add('快速登陸');
  state.loginType.add('密碼登陸');
  return state;
}

class QuickConnector extends Reselect2<LoginState, LoginQuickState, String, String> {
  @override
  LoginQuickState computed(String sub0, String sub1) {
    return LoginQuickState()
      ..account = sub0
      ..sendVerificationTips = sub1
      ..controllerForAccount = TextEditingController()
      ..controllerForPsd = TextEditingController();
  }

  @override
  String getSub0(LoginState state) {
    return state.accountFromCache;
  }

  @override
  String getSub1(LoginState state) {
    return state.countDownTips;
  }

  @override
  void set(LoginState state, LoginQuickState subState) {
    state.accountFromCache = subState.account;
    state.countDownTips = subState.sendVerificationTips;
  }
}
複製代碼

login_view

這個是用戶直接看到的視圖文件，咱們稍微理下： 其實也是和咱們上文說的佈局文件相似， 一imageView 一tabBar 一TabBarView 二login_quick Component 而已

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:flutter_module/comm/ColorConf.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(LoginState state, Dispatch dispatch, ViewService viewService) {

  return Scaffold(
    // appBar: AppBar(
    // title: Text('Login'),
    // ),
    body: Column(
      children: <Widget>[
        Container(
          child: Image.asset('images/img_logintop.webp'),
        ),
        Container(
          child: TabBar(
            indicatorColor: ColorConf.color18C8A1,
            indicatorPadding: EdgeInsets.zero,
            controller: state.tabControllerForLoginType,
            labelColor: ColorConf.color18C8A1,
            indicatorSize: TabBarIndicatorSize.label,
            unselectedLabelColor: ColorConf.color9D9D9D,
            tabs: state.loginType
                .map((e) => Container(
                      child: Text(
                        e,
                        style: TextStyle(fontSize: 14),
                      ),
                      padding: const EdgeInsets.only(top: 8, bottom: 8),
                    ))
                .toList(),
          ),
        ),
        Divider(
          height: 1,
        ),
        Expanded(
          child: TabBarView(
            children: <Widget>[
              viewService.buildComponent('login_quick'),
              viewService.buildComponent('login_quick'),
            ],
            controller: state.tabControllerForLoginType,
          ),
          flex: 3,
        )
      ],
    ),
  );
}
複製代碼

login_action

這裏其實就是定義操做，我以爲能夠有個類比，拿我半吊子的springboot來講， action就是一個service接口 effect就是一個serviceImpl實現類 reducer就是根據發出來的action進行頁面操做。

login_action只定義了一丟丟操做

import 'package:fish_redux/fish_redux.dart';

enum LoginAction { action, update }

class LoginActionCreator {
  static Action onAction() {
    return const Action(LoginAction.action);
  }

  static Action onUpdate(String countDownNumber) {
    return Action(LoginAction.update, payload: countDownNumber);
  }
}
複製代碼

login_effect

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_module/page/user/login_page/action.dart';
import 'StateWithTickerProvider.dart';
import 'state.dart';

Effect<LoginState> buildEffect() {
  return combineEffects(<Object, Effect<LoginState>>{
    LoginAction.action: _onAction,
    Lifecycle.initState: _onInit,
  });
}

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

void _onInit(Action action, Context<LoginState> ctx) {
  final TickerProvider tickerProvider = ctx.stfState as StateWithTickerProvider;
  ctx.state.tabControllerForLoginType =
      TabController(length: ctx.state.loginType.length, vsync: tickerProvider);
}
複製代碼

這個沒有什麼好說的，由於loginPage也沒有什麼特別的操做，惟一比較值得注意的是 這裏相對多了一個StateWithTickerProvider

這個文件主要是爲了給tabController提供TickerProvider,主要注意幾個地方

1. 定義一個StateWithTickerProvider 類：

class StateWithTickerProvider extends ComponentState<LoginState> with TickerProviderStateMixin{
}
複製代碼

2. 在page頁面重寫createState()方法：

@override
  StateWithTickerProvider createState() => StateWithTickerProvider();
複製代碼

3. 在effect，根據Lifecycle.initState定義方法

void _onInit(Action action, Context<LoginState> ctx) {
  final TickerProvider tickerProvider = ctx.stfState as StateWithTickerProvider;
  ctx.state.tabControllerForLoginType =
      TabController(length: ctx.state.loginType.length, vsync: tickerProvider);
}
複製代碼

login_reducer

這個頁面主要是用於更新view，怎麼更新呢？返回一個newState！！

import 'package:fish_redux/fish_redux.dart';

import 'action.dart';
import 'state.dart';

Reducer<LoginState> buildReducer() {
  return asReducer(
    <Object, Reducer<LoginState>>{
      LoginAction.action: _onAction,
      LoginAction.update: _onUpdate,
    },
  );
}

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

LoginState _onUpdate(LoginState state, Action action) {
  print('this is the _onUpdate in the buildReducer');
  final LoginState newState = state.clone()..countDownTips = action.payload;
  return newState;
}
複製代碼

login_page

page文件，在構造方法裏面調用init初始化

import 'package:fish_redux/fish_redux.dart';

import 'StateWithTickerProvider.dart';
import 'effect.dart';
import 'login_quick/component.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';

class LoginPage extends Page<LoginState, Map<String, dynamic>> {
  @override
  StateWithTickerProvider createState() => StateWithTickerProvider();

  LoginPage()
      : super(
          initState: initState,
          effect: buildEffect(),
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies<LoginState>(
              adapter: null,
              slots: <String, Dependent<LoginState>>{
                "login_quick": QuickConnector() + LoginQuickComponent(),
// "login_normal": QuickConnector() + LoginQuickComponent(),
              }),
          middleware: <Middleware<LoginState>>[],
        );
}
複製代碼

總結

總結這就來了，是否是隻有一個想法：亂！混亂！！好亂！！！什麼鬼！！！！mmp！！！！！ 咱們稍微理理，由於接下來就是點擊事件，網絡請求了。 咱們理下思路：

1. 咱們在state中定義數據，好比說 定義了一個string叫 String boyMsg = boy,
2. 咱們在view中定義了一個button，它的child就是一個text，顯示的文案叫**state.boyMsg **

看，你能夠畫頁面了！！！完美！雖然它點了也沒反應。

登陸子模塊

在這裏咱們稍微講下難點的，好比說點擊登陸

#####咱們先雲coding一下：

1. 在state中定義2個TextEditingController,就分別叫controllerForAccount和controllerForPsd好了，這2個鬼主要用於提供給view裏面的兩個TextField用;再寫一個String叫userInfoStr,這個鬼主要用來顯示數據的
2. 在action中定義一個枚舉，就叫它doLogin好了，再定義一個枚舉，叫showUserInfo，而後也記得在LoginQuickActionCreator中寫對應的方法。
3. 大道至簡，咱們直接在view中定義2個TextField,記得controler要用state.controllerForAccount和state.controllerForPsd來綁定控制器，而後加了一個button，這個是重點，文案必定要叫凌宇是個大帥比，否則會fc的，而後onTap裏面，咱們要發一個action出去，就是dispatch(LoginQuickActionCreator.onDoLogin())，而後再丟一個text，數據就綁定state.userInfoStr好了，記得**??**判空，否則會崩潰哦
4. 而後effect就會收到了對應的action，前提是咱們要在combineEffects中註冊，並提供對應的方法，在方法裏面咱們判空啊，Toast啊，請求網絡啊,丟數據去緩存啊...，請求成功啦，而後咱們要更新數據呢，咋辦..好辦！！咱們也發action！！在請求成功的callback裏面，咱們ctx.dispatch(TestPageActionCreator.onShowUserInfo());
5. 而後在reducer中，咱們寫對應的方法，記得調用clone，返回一個新的newState!
6. ok了，咱們如今不止會畫頁面了，還會點擊事件了。

實際代碼

話都說到了這裏了，你要不要試着按照上面的6個步驟試下，這樣體會更深哦，咱們貼下代碼：

1. action

import 'package:fish_redux/fish_redux.dart';

//TODO replace with your own action
enum TestPageAction { action, doLogin, showUserInfo }

class TestPageActionCreator {
  static Action onAction() {
    return const Action(TestPageAction.action);
  }

  static Action onDoLogin() {
    return const Action(TestPageAction.doLogin);
  }

  static Action onShowUserInfo() {
    return const Action(TestPageAction.showUserInfo);
  }
}
複製代碼

2. effect

import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';

Effect<TestPageState> buildEffect() {
  return combineEffects(<Object, Effect<TestPageState>>{
    TestPageAction.action: _onAction,
    TestPageAction.doLogin: _onDoLogin,
  });
}

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

void _onDoLogin(Action action, Context<TestPageState> ctx) {
  print('this is _onDoLogin method in the effect');
  ctx.dispatch(TestPageActionCreator.onShowUserInfo());
}
複製代碼

3. page

import 'package:fish_redux/fish_redux.dart';

import 'effect.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';

class TestPagePage extends Page<TestPageState, Map<String, dynamic>> {
  TestPagePage()
      : super(
            initState: initState,
            effect: buildEffect(),
            reducer: buildReducer(),
            view: buildView,
            dependencies: Dependencies<TestPageState>(
                adapter: null,
                slots: <String, Dependent<TestPageState>>{
                }),
            middleware: <Middleware<TestPageState>>[
            ],);

}
複製代碼

4. reducer

import 'package:fish_redux/fish_redux.dart';

import 'action.dart';
import 'state.dart';

Reducer<TestPageState> buildReducer() {
  return asReducer(
    <Object, Reducer<TestPageState>>{
      TestPageAction.action: _onAction,
      TestPageAction.showUserInfo: _onShowUserInfo,
    },
  );
}

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

TestPageState _onShowUserInfo(TestPageState state, Action action) {
  final TestPageState newState = state.clone();
  newState..userInfoStr = "凌宇是個超級大帥逼！！！！";
  return newState;
}
複製代碼

5. state

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';

class TestPageState implements Cloneable<TestPageState> {
  TextEditingController controllerForAccount, controllerForPsd;
  String userInfoStr;

  @override
  TestPageState clone() {
    return TestPageState()
      ..controllerForPsd = controllerForPsd
      ..controllerForAccount = controllerForAccount
      ..userInfoStr = userInfoStr;
  }
}

TestPageState initState(Map<String, dynamic> args) {
  return TestPageState()
    ..controllerForAccount = TextEditingController()
    ..userInfoStr=""
    ..controllerForPsd = TextEditingController();
}
複製代碼

6. view

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(
    TestPageState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(
      title: Text('測試'),
    ),
    body: Column(
      children: <Widget>[
        Text(state.userInfoStr ?? '暫無信息'),
        TextField(
          controller: state.controllerForAccount,
        ),
        TextField(
          controller: state.controllerForAccount,
        ),
        FlatButton(
            onPressed: () {
              dispatch(TestPageActionCreator.onDoLogin());
            },
            child: Text('凌宇是個大帥逼'))
      ],
    ),
  );
}
複製代碼

總結

其實子模塊的代碼也沒有必要貼了，無非就是action多了一點，加了判空，加了實際網絡請求而已，對着上面的代碼也是同樣的。 再而後， 再還有aop，adapter（其實我有用的，可是登陸模塊咋講嘛...且學且用吧）等等東西，越學越有趣，閒魚大佬真厲害。

總結

突如其來的ending...哈哈哈，大半夜的啤酒加歌有點嗨。 說下遇到的兩個點比較坑的：

1. tabController的坑： 確實新手嘛，剛接觸的時候死活找不到改咋辦，而後靈機一動，上gayhub搜Issues，確實也有同窗反饋過，果真遇事不決看文檔！對應的方案我寫在上面了
2. component更新的奇怪問題 獲取驗證碼模塊須要有個倒數計時，這個簡單，用了timer，可是我更新了state，頁面死活沒更新...我懷疑是TickerProvider，我到如今也沒確診，解決辦法是我饒了個圈，把倒數計時的currCountTime放在page而不是component，問題解決了，雖然知其然不知其因此然，愁！！
3. 再而後的坑，也沒了吧。那晚安吧！