Fish Redux系列学习之初探

前言: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理解,接下来我们看具体的代码。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章