手把手入門Fish-Redux開發flutter（上）

本文適合已經入門flutter，沒有了解過Redux，但對Fish-Redux感興趣的同窗。

手把手入門Fish-Redux開發flutter（上） （中） （下）

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

首先看左上：用戶進行某個操做----->而後調用context.dispatch方法發送一個由ActionCreator建立的Action----->effect接收並處理，而後dispatch給reducer----->reducer接收併產生新的state----->state更新致使界面顯示的刷新

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 ,選擇後彈出窗口以下：

咱們採用默認勾選，並命名這個 module 爲 Entrance。 而後獲得的 Entrance 頁以下

從 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的使用。

🤗若是個人內容對您有幫助，歡迎點贊、評論、轉發、收藏。