前言:fishredux是闲鱼出的一款Flutter框架,是为了解决业务代码耦合严重,可维护性差而出的一个基于redux数据管理的组装式flutter应用框架,适合用于构建大中型的复杂应用。
特点:配置式组装
fishredux把一个大的页面拆解成两部分,把视图与数据层拆解为相互独立的component(adapter),另外一方面又将component(adapter)拆成view、reducer、effect等相互独立的且与上下文无关函数。fishredux的灵感主要来自于redux、react、elm、dva这样优秀的签订框架,在此之上,将集中,分治,复用,隔离做得更进一步。
流程图
以下是单个页面的流程图。
从上图中我们可以看出,一个page由view、state、effect、reducer等组成。
当用户进行某个按钮(操作)的时候,调用context.dispatch方法发送一个由ActionCreator创建的action,effect接受这个action并进行处理,然后effect再将这个action dispatch给reducer,reducer接收并产生一个新的state,state更新界面view的刷新。
理解redux
Redux 是来自前端社区的一个数据管理框架,它是一个用来做可预测易调试的数据管理的框架。所有对数据的增删改查等操作都由 Redux 来集中负责。fishredux中的State、Action、Reducer、Store、Middleware 概念和社区的 ReduxJS 完全一致。
如果想对 Redux 有更近一步的理解,请参考 redux
Component:
Component即组件,它是对局部的展示和功能的封装。 基于 Redux 的原则,我们对功能细分为修改数据的功能(Reducer)和非修改数据的功能(副作用 Effect)。
于是我们得到了,View、 Effect、Reducer 三部分,称之为组件的三要素,分别负责了组件的展示、非修改数据的行为、修改数据的行为。
即:
View:组件的展示
Effect:非修改数据的功能
Reducer:修改数据的行为
View:
View 只是一个函数签名: (T,Dispatch,ViewService) => Widget
功能:
1 视图是完全由数据驱动。
2 视图产生的事件/回调,通过 Dispatch 发出“意图”,不做具体的实现。
3 需要用到的组件依赖等,通过 ViewService 标准化调用。
Effect
Effect 是一个函数签名: (Context, Action) => Object
功能:
接收来自 View 的“意图”,也包括对应的生命周期的回调,然后做出具体的执行。
它的处理可能是一个异步函数,数据可能在过程中被修改,所以我们不崇尚持有数据,而通过上下文来获取最新数据。
它不修改数据, 如果修要,应该发一个 Action 到 Reducer 里去处理。
Reducer
Reducer 是一个完全符合 Redux 规范的函数签名:(T,Action) => T
功能:
接收来自Effect中的意图,进行具体数据操作
以上就是简单的闲鱼宣传中简单的fishredux理解,接下来我们看具体的代码。