Fish Redux系列学习之初探

心已赠人 2021-06-10 20:37 386阅读 0赞

> 前言：fishredux是闲鱼出的一款Flutter框架，是为了解决业务代码耦合严重，可维护性差而出的一个基于redux数据管理的组装式flutter应用框架，适合用于构建大中型的复杂应用。

## 特点：配置式组装 ##

fishredux把一个大的页面拆解成两部分，把视图与数据层拆解为相互独立的component（adapter），另外一方面又将component（adapter）拆成view、reducer、effect等相互独立的且与**上下文**无关函数。fishredux的灵感主要来自于redux、react、elm、dva这样优秀的签订框架，在此之上，将集中，分治，复用，隔离做得更进一步。

## 流程图 ##

以下是单个页面的流程图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]  
从上图中我们可以看出，一个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中的意图，进行具体数据操作

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]

以上就是简单的闲鱼宣传中简单的fishredux理解，接下来我们看具体的代码。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/494313930ca3466383aaad3e65ae5ae8.png
[redux]: https://github.com/reduxjs/redux
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]: /images/20210529/db979845311f4dff8980ee291f08ccc6.png