Fish Redux 使用指南

为啥要使用Fish redux

1，年前就被闲鱼大佬安利，种草已久

2，想要对比Flutter Redux，学习体会它带来的优越性

3，参与并支持一下国产，如今Flutter生态还在早期

准备工做

1，Redux.js 文档

2，Fish Redux 文档

3，Pub使用文档

萌新（没接触过Redux）：建议按顺序看一遍，磨刀不费砍柴功，扎实的理论基础是颇有用处的

熟练玩家（Demo用过Redux）：建议把Fish Redux文档的简介和Component看下，尤为是Component，这是它独特的地方

老司机（项目中用过Redux.js或Flutter Redux）：能够重点看下Component中的Effect，Dependencies，Page，还有Adapter

在看文档时，能够把Fish Redux项目Clone下来，先把Example改下跑跑看，再对着源码理解下文档中的概念。

重要概念

固然如下概念仍是须要理解的：

Action

Action定义一种行为，能够携带信息，发往Store。换言之Store发生改变须由Action触发，Fish redux 有如下约定：Action 包含两个字段type和payload；推荐写法是在action.dart里定义一个type枚举类和一个ActionCreator类，这样有利于约束payload的类型。

Reducer/Effect

这两个函数都是用来处理数据的函数，Reducer是纯函数响应Action对Store数据进行改变。Effect用来处理来自视图的意图，如点击事件，发起异步请求，这些有反作用的操做。

Page

能够当作是一个容器，它用来配置聚合State，Effect，Reduce，View，Dependencies等

• 一个页面内都有且仅有一个 Store（意思是会有好多个Store，这是区别于Flutter Redux的）
• Page 继承于 Component，因此它能配置全部 Component 的要素（意思是比Component多了Middleware和initState）
• Page 能配置 Middleware，用于对 Redux 作 AOP 管理（意思是能够无侵入的实现一些如log打印，性能分析这样的通用功能。中间件定义是可插拔，可叠加，但不会改变事件流程）
• Page 必须配置一个初始化页面数据的初始化函数initState（页面有初始数据是必须的吧）

Adapter（可选）

这个不是必须，但确实很屌，很好用，使用和Android的老配方差很少，妙在效果拔群。有追求的能够看下历史和原理，固然还有源码。

有这些储备，那么能够开始写代码了

接入

1，建立一个flutter project，按照文档加入依赖

2，按照定义（固然也能够对着Example）分别建立Action，State，Effect，Reducer，View，Page这几个文件，并写套路代码。

3，运行代码观察效果

我的体验

1，集中，分治

Fish Redux完整复刻了Redux.js的核心概念，状态是一颗State树，完总体现[Predictable],[Centralized],[Debuggable],[Flexible]，数据状态是由Redux集中管理的。分治是分而治之，把一个大的问题拆解成若干独立的小问题去解决，好比Effect的实现和Component的封装，一个页面能够由多个Component和Effect共同组成，分治带来的一个额外好处是提升了内聚性和可复用性。

2，Adapter

我的认为这是闲鱼团队基于现实业务的一个很重要创造，Listview能够占到一个应用的50%以上界面，它的体验相当重要。事实证实Adapter封装的很友好，性能也很突出，在Demo上就能够明显对比出来，很妙。

3，文档

这点是能够理解一下的，毕竟刚开源。现状是注释少，好多模块尚未。文档有，但不太具体生动，友好，读者没带入容易字都认识，但看几遍还不解其意。

问题

1，Fish Redux 一个页面一个Store的资源开销？

用Observatory查看，单个实例引用并不大，并且退出页面store实例被回收，理论上资源比flutter redux还少一点。

2，Store的生命周期，应用的一些长期共用数据怎么维护？

能够用createStore建立一个store做为单例维护，参考。

本文源码地址：https://github.com/hyjfine/flutter_redux_sample/tree/fish-redux-adapter

（完）

@子路宇, 本文版权属于再惠研发团队，欢迎转载，转载请保留出处。