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

（完）

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

转载于:https://juejin.im/post/5c91a7cae51d45074f71afb5