手把手入门Fish-Redux开发flutter(上)

6,997 阅读4分钟

本文适合已经入门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的使用。

🤗如果我的内容对您有帮助,欢迎点赞、评论、转发、收藏。