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

你可能感兴趣的:(Fish Redux 使用指南)