手把手入门Fish-Redux开发flutter（中）

手把手入门Fish-Redux开发flutter（上）
手把手入门Fish-Redux开发flutter（中）
手把手入门Fish-Redux开发flutter（下）

上一次我们创建了项目，集成了 fish-redux ，安装了插件，并写出第一个页面，这次我们更详细的了解 fish-redux 。并实现一个简单的列表。效果：

image

1 跳转到一个新的页面

1.1 创建一个新页面

我们用上一篇讲述的的方式：创建 package 、创建 FishReduxTemplate 来得到新的页面，取名叫 Grid 。

image

把这个页面也添加到app.dart的页面路由中。app.dart修改如下

Widget createApp() {
  final AbstractRoutes routes = PageRoutes(
    pages: >{
      'entrance_page': EntrancePage(),
      'grid_page': GridPage(),  //添加这一行
    },
  );

  //省略 ...
}

然后编辑这个页面的 view.dart，暂且让它显示一行文字。/grid/view.dart如下

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

Widget buildView(GridState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: new AppBar(
      title: new Text('Grid页面'),
    ),
    body: Text("Grid页面"),
  );
}

1.2 完成页面的跳转

理清思路：为了从 entrance 页面跳转到 grid 页面。我们需要：

1. 为 entrance 页面定义跳转的 action
2. 在 entrance 页面跳转的地方 dispatch 这个 action
3. 在 effect 处理这个 action，即进行页面跳转（这里不涉及到状态的更新，所以不在 reducer 里处理啦）

第一步 定义 action

我们打开 /entrance/action.dart 发现由模板创建的代码中为我们默认定义了一个action，我们照它的样子添加自己的 action ，取名叫 openGrid 表示打开 grid 页面的事件。修改后的 /entrance/action.dart 如下

import 'package:fish_redux/fish_redux.dart';

enum EntranceAction { action, openGrid }//增加openGrid

class EntranceActionCreator {
  static Action onAction() {
    return const Action(EntranceAction.action);
  }
  //我们定义的
  static Action onOpenGrid() {
    return const Action(EntranceAction.openGrid);
  }
}

第二步 发送Action

我们打开 /entrance/view.dart，为 RaisedButton 写点击事件 onPress。在这里dispatch我们定义的OpenGrid事件。

            dispatch(EntranceActionCreator.onOpenGrid());

修改后的 /entrance/view.dart如下

image

第三步 接收并处理事件

打开 /entrance/effect.dart，让它接收并处理我们定义的 OpenGrid Action。 /entrance/effect.dart代码如下

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/widgets.dart' hide Action;  //注意1
import 'action.dart';
import 'state.dart';

Effect buildEffect() {
  return combineEffects(>{
    EntranceAction.action: _onAction,
    EntranceAction.openGrid: _onOpenGrid,   //接收openGrid事件 
  });
}

void _onAction(Action action, Context ctx) {
}

//处理openGrid事件
void _onOpenGrid(Action action, Context ctx) {
  Navigator.of(ctx.context).pushNamed('grid_page', arguments: null);    //注意2
}

这里有两个地方要注意。第一个地方是由于我们跳转页面引入的 widgets.dart 包含 Action 类，会与 fish-redux 的 Action 冲突并报错，所以在 import 时需要 hide Action ，之后就不在赘述。另外，pushNamed() 方法第一个参数就是我们在 app.dart 里面定义的页面路由。

然后我们运行看看效果：点击进入，跳转到了grid页面。

image

2 简单的列表

现在我们来把 grid 页面改造成一个简单的列表。

2.1 定义数据格式

我新建一个 model.dart 存放我的数据实体类 。我在 GridModel 简单的定义了一个 name 字段 model.dart 如下

image

然后在 grid 页面的 state.dart 中，创建数据的集合。修改后端 /grid/state.dart如下

import 'package:fish_redux/fish_redux.dart';
import '../model.dart';

class GridState implements Cloneable {
  
  List models;   // 存放数据

  @override
  GridState clone() {
    return GridState()
    ..models = models;      //clone规则
  }
}

GridState initState(Map args) {
  return GridState();
}

2.2 在界面上展示

接着我们在页面中通过 gridview 展示我们的数据，列表的数据就采用 state 中的 models。修改 /grid/view.dart 如下

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

import 'state.dart';

Widget buildView(GridState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: new AppBar(
      title: new Text('Grid页面'),
    ),
    body: new GridView.count(
      crossAxisCount: 2,//列数
      crossAxisSpacing: 20.0,// 左右间隔
      mainAxisSpacing: 20.0,// 上下间隔
      childAspectRatio: 1 / 1, //宽高比
      padding: EdgeInsets.all(20),
      children: new List.generate(state.models.length, (index) {//使用state里面的models生成列表
        return Center(
          child: Card(
            color: Colors.lightBlueAccent,
            child: InkWell(
              splashColor: Colors.blue.withAlpha(100),
              onTap: () {
                //todo 点击事件
              },
              child: Container(
                width: 200,
                height: 200,
                child: Center(
                  child: Text(state.models[index].name),//展示name字段
                ),
              ),
            ),
          ));
      }),
    ),
  );
}

数据格式和展示样式都已经完成，接下来我们来获得数据。

2.3 数据来源

我创建一个 api.dart 用来进行数据请求。

image

我创建一个单例 Api ，把它作为全局的数据来源。然后完成一个获得 GridModel 数据的函数来给我们 grid 页面提供数据。 api.dart 如下

import 'model.dart';

class Api {
  factory Api() {
    return _get();
  }

  static Api _instance;

  Api._internal() {
    //init Api instance
  }

  static _get() {
    if (_instance == null) {
      _instance = Api._internal();
    }
    return _instance;
  }

  
  List getGridData() {
    return [
      GridModel(name: "第一块"),
      GridModel(name: "第二块"),
      GridModel(name: "第三块"),
      GridModel(name: "第四块"),
      GridModel(name: "第五块"),
      GridModel(name: "第六块"),
      GridModel(name: "第七块"),
      GridModel(name: "第八块"),
      GridModel(name: "第九块"),
      GridModel(name: "第十块"),
    ];
  }
}

2.4 加载数据

我们需要在 grid 页面进入时进行数据加载。首先通过 effect 接收 state 初始化的生命周期事件，在 state 初始化的时候，我们 dispatch 一个加载数据的 action 给 reducer，reducer 接收事件，请求数据并更新 state 。

第一步 定义action

在 /grid/action.dart 中添加一个 action, 取名 loadData。添加后如下

import 'package:fish_redux/fish_redux.dart';

enum GridAction { action, loadData }

class GridActionCreator {
  static Action onAction() {
    return const Action(GridAction.action);
  }
  
  static Action onLoadData() {
    return Action(GridAction.loadData);
  }
}

第二步 初始化时发送action

然后在 effect 中监听初始化事件，并发送 loadData Action。修改后的 /grid/effect.dart 如下

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

Effect buildEffect() {
  return combineEffects(>{
    Lifecycle.initState: _init, //页面初始化
    GridAction.action: _onAction,
  });
}

void _onAction(Action action, Context ctx) {
}

void _init(Action action, Context ctx) {
  ctx.dispatch(GridActionCreator.onLoadData()); //发送事件
}

第三步 接收action并更新state

最后在 reducer 中接收 loadData 事件，调用 Api 请求数据, 并更新 state 。修改后的 /grid/reducer.dart如下

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

Reducer buildReducer() {
  return asReducer(
    >{
      GridAction.action: _onAction,
      GridAction.loadData: _onLoadData, //接收loadData Action
    },
  );
}

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

//初始化数据
GridState _onLoadData(GridState state, Action action) {
  final GridState newState = state.clone()..models = Api().getGridData();//从Api请求数据
  return newState;
}

运行一下看看效果

image

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