美文网首页
Fish_Redux(一)关于Fish_Redux的一些概念

Fish_Redux(一)关于Fish_Redux的一些概念

作者: CodingMann丶许半仙 | 来源:发表于2020-01-09 18:10 被阅读0次

    fish redux 是什么

    Fish Redux 是一个基于 Redux 数据管理的组装式 flutter 应用框架, 它特别适用于构建中大型的复杂应用。
    它的特点是配置式组装。 一方面我们将一个大的页面,对视图和数据层层拆解为互相独立的 Component|Adapter,上层负责组装,下层负责实现; 另一方面将 Component|Adapter 拆分为 View,Reducer,Effect 等相互独立的上下文无关函数。
    所以它会非常干净,易维护,易协作。
    Fish Redux 的灵感主要来自于 Redux, Elm, Dva 这样的优秀框架。而 Fish Redux 站在巨人的肩膀上,将集中,分治,复用,隔离做的更进一步。

    fish redux 干什么用的

    fish redux 用作flutter项目中的状态管理,在我看来,它可以作为组织Flutter页面的利器。就目前flutter页面 如果把每一个widget都放到一个dart文件中,在阅读源码以及后续的维护上都是非常困难的一件事,使用fish redux就可以打破这种局面,页面中每个Component 都单独出来,清爽了许多。

    fish redux的组成

    • store

    根据继承关系而来的状态树

    • state

    保存页面状态(例如 主题色)

    • Action

    动作(例如添加)

    Action 包含两个字段
    • type
    • payload
    推荐的写法是
    • 为一个组件|适配器创建一个 action.dart 文件,包含两个类
      • 为 type 字段起一个枚举类
      • 为 Action 的创建起一个 ActionCreator 类,这样利于约束 payload 的类型。
    • Effect 接受处理的 Action,以 on{Verb} 命名
    • Reducer 接受处理的 Action,以{verb} 命名
      示例代码
    enum MessageAction {
        onShare,
        shared,
    }
    
    class MessageActionCreator {
        static Action onShare(Map<String, Object> payload) {
            return Action(MessageAction.onShare, payload: payload);
        }
    
        static Action shared() {
            return const Action(MessageAction.shared);
        }
    }
    
    • Effect/Reducer

    处理Action(根据不同的action,修改与action相对应的state返回新state时fish redux层层通知修改页面状态。
    两者的区别:
    Effect处理类似页面初始化的时候对state 数据做的一些修改 或者 异步请求这些东西
    Reducer 处理类似 单击页面中某按钮,修改主题色这样的动作

    Reducer

    • Reducer 是一个上下文无关的 pure function。它接收下面的参数
      • T state
      • Action action
    • 它主要包含三方面的信息
      • 接收一个“意图”, 做出数据修改。
      • 如果要修改数据,需要创建一份新的拷贝,修改在拷贝上。
      • 如果数据修改了,它会自动触发 State 的层层数据的拷贝,再以扁平化方式通知组件刷新。

    示例代码

    Reducer<String> buildMessageReducer() {
      return asReducer(<Object, Reducer<String>>{
        'shared': _shared,
      });
    }
    
    String _shared(String msg, Action action) {
      return '$msg [shared]';
    }
    
    class MessageComponent extends Component<String> {
        MessageComponent(): super(
                view: buildMessageView,
                effect: buildEffect(),
                reducer: buildMessageReducer(),
            );
    }
    

    effect
    接收View的"意图",也包括对生命周期的回调。不修改数据,它对数据是只读的,如果要修改,应该发送一个Action到Reducer中去处理。

    • view

    绘制页面

    • Adapter

    适配器【主要用于页面中包含 Lisview,适配ListView中每一项,比较特殊】

    • Connector

    连接 【描述了主页面的state与页面中的Component的关系】,从page state中存取与之关联的Component的状态。

    • Component

    页面小部件,组成page的一部分,对局部的展示和功能的封装。对功能细分为修改数据的功能(Reducer)和非修改数据的功能(副作用Effect)。于是有了View、Effect、Reducer组件三要素。

    • page

    对以上内容的组装描述

    转载自:https://www.cnblogs.com/zzfstudy/p/11351951.html

    相关文章

      网友评论

          本文标题:Fish_Redux(一)关于Fish_Redux的一些概念

          本文链接:https://www.haomeiwen.com/subject/mufuactx.html