Flutter fish-redux 简单使用
时间:2022-07-24
本文章向大家介绍Flutter fish-redux 简单使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
引入fish_redux插件,想用最新版插件,可进入pub地址里面查看
dependencies:
fish_redux: ^0.3.4
开发插件
此处我们需要安装代码生成插件,可以帮我们生成大量文件和模板代码
在Android Studio里面搜索”fish“就能搜出插件了,插件名叫:FishReduxTemplate
创建
这里我在新建的count文件夹上,选择新建文件,选择:New —> FishReduxTemplate
此处选择:Page,底下的“Select Fils”全部选择,这是标准的redux文件结构
创建好后文件结构
至此准备工作已做完
fish_redux流程
在写代码前,先看写下流程图
可以发现,事件的传递,都是通过dispatch这个方法,而且action这层很明显是非常关键的一层,事件的传递,都是在该层定义和中转的
写一个计数器demo
fish_redux正常情况下的流转过程 fish_redux各模块怎么传递数据
- 这个例子演示,view中点击此操作,然后更新页面数据。下述的流程,在effect中把数据处理好,通过action中转传递给reducer更新数据
view —> action —> effect —> reducer(更新数据)
- 注意:该流程将展示,怎么将数据在各流程中互相传递
main
- 这地方需要注意material这类系统包和fish_redux里包含的“Page”类名重复了,需要在这类系统包上使用hide,隐藏系统包里的Page类
import 'package:fish_redux/fish_redux.dart';
import 'package:fishredux/count/page.dart';
import 'package:flutter/material.dart' hide Page;
Widget createApp() {
final AbstractRoutes routes = PageRoutes(
pages: <String, Page<Object, dynamic>>{
'count_page': CountPage(), //在这里添加页面
},
);
return MaterialApp(
title: 'FishDemo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: routes.buildPage('count_page', null), //把他作为默认页面
onGenerateRoute: (RouteSettings settings) {
return MaterialPageRoute<Object>(builder: (BuildContext context) {
return routes.buildPage(settings.name, settings.arguments);
});
},
);
}
state
- 定义我们在页面展示的一些变量,initState中可以初始化变量;clone方法的赋值写法是必须的
import 'package:fish_redux/fish_redux.dart';
class CountState implements Cloneable<CountState> {
int count;
@override
CountState clone() {
return CountState()..count = count;
}
}
CountState initState(Map<String, dynamic> args) {
return CountState()..count = 0;
}
view
view:这里面就是写界面的模块,buildView里面有三个参数
- state:这个就是我们的数据层,页面需要的变量都写在state层
- dispatch:类似调度器,调用action层中的方法,从而去回调effect,reducer层的方法
- viewService:这个参数,我们可以使用其中的方法:buildComponent(“组件名”),调用我们封装的相关组件
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'action.dart';
import 'state.dart';
Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {
return _bodyWidget(state,dispatch);
}
Widget _bodyWidget(CountState state, Dispatch dispatch) {
return Scaffold(
appBar: AppBar(
title: Text("FishRedux"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:'),
Text(state.count.toString()),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
///点击事件,调用action 计数自增方法
dispatch(CountActionCreator.countIncrease());
},
child: Icon(Icons.add),
),
);
}
action
该层是非常重要的模块,页面所有的行为都可以在本层直观的看到
- XxxxAction中的枚举字段是必须的,一个事件对应有一个枚举字段,枚举字段是:effect,reducer层标识的入口
- XxxxActionCreator类中的方法是中转方法,方法中可以传参数,参数类型可任意;方法中的参数放在Action类中的payload字段中,然后在effect,reducer中的action参数中拿到payload值去处理就行了
- 这地方需要注意下,默认生成的模板代码,return的Action类加了const修饰,如果使用Action的payload字段赋值并携带数据,是会报错的;所以这里如果需要携带参数,请去掉const修饰关键字
import 'package:fish_redux/fish_redux.dart';
//TODO replace with your own action
enum CountAction { increase,updateCount }
class CountActionCreator {
///去effect层去处理自增数据
static Action countIncrease() {
return Action(CountAction.increase);
}
///去reducer层更新数据,传参可以放在Action类中的payload字段中,payload是dynamic类型,可传任何类型
static Action updateCount(int count) {
return Action(CountAction.updateCount, payload: count);
}
}
effect
- 如果在调用action里面的XxxxActionCreator类中的方法,相应的枚举字段,会在combineEffects中被调用,在这里,我们就能写相应的方法处理逻辑,方法中带俩个参数:action,ctx
- action:该对象中,我们可以拿到payload字段里面,在action里面保存的值
- ctx:该对象中,可以拿到state的参数,还可以通过ctx调用dispatch方法,调用action中的方法,在这里调用dispatch方法,一般是把处理好的数据,通过action中转到reducer层中更新数据
import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
Effect<CountState> buildEffect() {
return combineEffects(<Object, Effect<CountState>>{
CountAction.increase: _onIncrease,
});
}
///自增数
void _onIncrease(Action action, Context<CountState> ctx) {
///处理自增数逻辑
int count = ctx.state.count + 1;
ctx.dispatch(CountActionCreator.updateCount(count));
}
reducer
- 该层是更新数据的,action中调用的XxxxActionCreator类中的方法,相应的枚举字段,会在asReducer方法中回调,这里就可以写个方法,克隆state数据进行一些处理,这里面有俩个参数:state,action
- state参数经常使用的是clone方法,clone一个新的state对象;action参数基本就是拿到其中的payload字段,将其中的值,赋值给state
import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
Reducer<CountState> buildReducer() {
return asReducer(
<Object, Reducer<CountState>>{
CountAction.updateCount: _updateCount,
},
);
}
CountState _updateCount(CountState state, Action action) {
final CountState newState = state.clone();
newState.count = action.payload;
return newState;
}
效果
点击按钮+1
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 面试官:什么是面向对象?
- 详解SpringCloud中RabbitMQ消息队列原理及配置,一篇就够!
- 面试官:什么是字节码?它最大的优势是什么?
- 数组转List,一定要小心这个坑!
- 【小白学PyTorch】5.torchvision预训练模型与数据集全览
- 实战 | Python爬取B站柯南弹幕+Gephi梳理主线剧情
- Docker 部署SpringBoot项目不香吗?
- 面试官写了个双冒号::问我这是什么语法?Java中有这玩意?
- 精解四大集合框架:List核心知识总结
- 【深度学习】Keras vs PyTorch vs Caffe:CNN实现对比
- 【深度学习】迁移学习理论与实践
- 使用OpenCV+Tensorflow跟踪排球的轨迹
- 基于OpenCV的手掌检测和手指计数
- 错误诊断:索引数据错误导致ORA-00600 [kdsgrp1]处理
- Python让你成为AI 绘画大师,简直太惊艳了!(附代码))