Fish Redux系列学习之认识view、action

继续上一篇文章：

Fish Redux系列学习之新建page以及认识state

如上图，现在我们学习的是buildview这个组件，说白了，buildView是我们写页面的地方，跟写普通flutter的page页面一样，我们将页面都写在这里面。

View部分：

view部分的代码：

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:miaoxun/utils/image_constant.dart';
import 'package:miaoxun/utils/images_util.dart';

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

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

  return Scaffold(
    backgroundColor: Color.fromRGBO(255, 209, 0, 1),
    body: Center(
      child: Image.asset(ImageUtil.getImgPath(ImageConstant.qidong),width: 83.5, height: 33.0,),
    ),
    appBar: AppBar(  // 加这个appbar只是示例跳转，
      title: Text(state.title),
      actions: <Widget>[
        GestureDetector(
          child: Text('点我跳转'),
          onTap: (){
            dispatch(SplashActionCreator.onAction()
            );
          },
        )
      ],
    ),
  );
}

放上截图：

这里直接是一个函数返回Widget视图，其中state、dispatch、viewService就是fishredux中所夹带的参数，state带有数据以达到更新数据刷新页面的效果，dispatch是承接用户的一些操作，进行时间的分发，如：刷新，跳转页面，弹框等。viewService是一个包含Context的viewService，主要是进行一些adapter、component、dialog等组件的组装。

action部分：

action部分的代码：

import 'package:fish_redux/fish_redux.dart';

//TODO replace with your own action
enum SplashAction { action ,toMainPage}

class SplashActionCreator {
  static Action onAction() {
    return const Action(SplashAction.action);
  }

  static Action onToMainPage(){
    return const Action(SplashAction.toMainPage);
  }
}

在view代码部分我们有这样一部分代码：

 GestureDetector(
          child: Text('点我跳转'),
          onTap: (){
           dispatch(SplashActionCreator.onToMainPage()
            );
          },
        )

在onTap方法上直接有一个dispatch(SplashActionCreator.onToMainPage()，顾名思义就是跳转到首页。

在action中，我们可以看到有两个类，一个是SplashAction，一个是SplashActionCreator，它们两更可能的像一个暴露出去的接口，在view中进行调用。

如下图：

以上就是这篇文章学习的view、action两个功能点，接下来我们将学习一下effect、reducer这两个功能。

来源：CSDN

作者：xudailong_blog

链接：https://blog.csdn.net/xudailong_blog/article/details/104137821