Fish Redux

Fish Redux使用说明

Fish Redux 是一个以 Redux 作为数据管理的思想,以数据驱动视图,组装式的 Flutter 应用框架。
它的特点是配置式组装。 一方面我们将一个大的页面,对视图和数据层层拆解为互相独立组件,上层负责组装,下层负责实现; 另一方面将组件拆分为 View,Reducer,Effect 等相互独立的上下文无关函数。所以它会非常干净,易维护,易协作。

基础使用

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 。

Adapter
Adapter 也是对局部的展示和功能的封装。它为 ListView 高性能场景而生,它是 Component 实现上的一种变化。

工作流程

用户操作
更新
dispatch
dispatch
NewState
View
Context
State
Effect
Reducer

配置环境

参考(Flutter学习体会)

引入Fish-Redux

打开pubspec.yaml文件,在 dependencies 下面加上 fish_redux: ^0.3.3 ,点击 packages get 。

安装FishReduxTemplate

fish-redux团队为我们提供了一个插件,方便我们使用fish-redux,简化了文件创建的过程。
1
2

FishReduxTemplate使用说明

首先新建一个 package 命名为 ***(名字按自己需求写)。

右键点击 自己起的名字----> New ----> FishReduxTemplate

3
点击箭头选择的地方按自己需求勾选自己需要的组件会生成组件,组件创建完成以后,就需要自己按文档上面描述的自己写代码了。
4
注意
用这个插件的时候有个bug,生成的插件需要切换一下视图才能显示出来,千万不要多次创建。

Fish Redux 的优点及原理

数据的集中管理

通过 Redux 做集中化的可观察的数据管理。将原汁原味地保留所有的 Redux 的优势,同时在 Reducer 的合并上,变成由框架代理自动完成,大大简化了使用 Redux 的繁琐度。

组件的分治管理

组件既是对视图的分治,也是对数据的分治。通过逐层分治,我们将复杂的页面 和数据切分为相互独立的小模块。这将利于团队内的协作开发。

View、Reducer、Effect 隔离

将组件拆分成三个无状态的互不依赖的函数。因为是无状态的函数,它更易于编写、调试、测试、维护。同时它带来了更多的组合、复用和创新的可能。
声明式配置组装组件、适配器通过自由的声明式配置组装来完成。包括它的 View、Reducer、Effect 以及它所依赖的子项。

良好的扩展性

核心框架保持自己的核心的三层关注点,不做核心关注点以外的事情,同时对上层保持了灵活的扩展性。
框架甚至没有任何的一行的打印的代码,但我们可通过标准的 Middleware 来观察到数据的流动,组件的变化。
在框架的核心三层外,也可以通过 dart 的语言特性 为 Component 或者Adapter 添加 mixin,来灵活的组合式地增强他们的上层使用上的定制和能力。
框架和其他中间件的打通,诸如自动曝光、高可用等,各中间件和框架之间都是透明的,由上层自由组装。

精小、简单、完备

非常小,仅仅包含 1000 多行代码;
使用简单,完成几个小的函数,完成组装,即可运行;
完备的。

官方文档以及源码

Fish-Redux开源地址

闲鱼出版书籍Flutter in action

项目实践

项目实例使用了公司原生的东西,不方便贴出来。有需要的可以留言。

flutter_json_format(Json转实体类)

添加插件步骤:File->Settings->Plugins->Marketplace搜索插件名字,安装完成然后重启Android Studio。

dbj
我这已经安装过了,所以搜索出来显示的是Installed。


使用方法

在需要创建实体类文件的目录下新建dart文件,复制你获取到的json串,然后可以用快捷键 (mac os:command + N; or windows:Alt+Inset)或者在文件里面鼠标右键选择Generate...,选择flutter json format,粘贴json然后点OK自动生成model类。(不明白的可以按下图依次操作)

1

2

3

猜你喜欢

转载自blog.csdn.net/TLuffy/article/details/105632064