Bloc架构-翻译

原文bloc-architecture

Bloc 架构

使用Bloc允许我们将应用分为三层:

  • Data 数据层
    • Data Provider 数据提供者
    • Repository 数据仓库
  • Business Logic 业务逻辑层
  • Presentation 表现层

感觉类似于 MVC
Data 对应 Model;
Business Logic 对应 Controller;
Presentation 对应 View;

我们将从最底层(距离用户界面最远)开始,向上讲解它们的工作方式。

数据层 (Data Layer)

数据层负责从一个或者多个数据源中检索/操作数据

数据层可以分为两部分:

  • 仓库 (Repository)
  • 数据提供者 (Data Provider)

数据层是应用程序的最底层,并与数据库,网络请求和其他异步数据源进行交互。

数据提供者 (Data Provider)

DataProvider 负责提供元数据。DataProvider应该是万能通用的。

DataProvider通常会公开一些简单的API来执行CRUD操作。例如会提供一些createDatareadDataupdateData,和deleteData方法来作为数据层的一部分。

class DataProvider {
    Future<RawData> readData() async {
        // 从数据库或者网络获取数据等...
    }
}

仓库 (Repository)

repository 负责将一个或者多个 data provider 包装在一起,与 Bloc 层 (业务逻辑层)通信。

class Repository  {
    final DataProviderA dataProviderA;
    final DataProviderB dataProviderB;
    
    Future<Data> getAllDataThatMeetsRequirements() async {
        final RawDataA dataSetA = await dataProviderA.readData();
        final RawDataB dataSetB = await dataProviderB.readData();
        
        final Data filteredData = _filterData(dataSetA, dataSetB);
        return filteredData;
    }
}

如你所见,repository层可以与多个data provider交互,并在将结果交给业务逻辑层之前对数据执行转换。

业务逻辑层 Bloc (Business Logic) Layer

bloc层 负责使用新状态(state)响应表现层中的事件(event)。bloc层可以依赖于一个或多个repositiry来检索构建应用程序状态所需的数据。

bloc层视为连接用户界面(prsentation layer)和 数据层 (data layer) 的桥梁。bloc层接受用户输入生成的事件(event),然后与repository通信,以便为表示层构建新的状态(state)使用。

个人认为就是: 输入event ==> 输出state

class BusinessLogicComponent extends Bloc {
    final Repository repository;
    
    Stream mapEventToState(event) async * {
        if(event is AppStarted) {
            yield await repository.getAllDataThatMeetsRequirements();
        }
    }
}

Bloc 与 Bloc 通信 (Bloc-to-Bloc Communication)

每个bloc都有一个状态流,其他bloc可以订阅这个状态流,以便对bloc内的变化作出反应。

Bloc 可以依赖于其他 Bloc 来对其状态变化做出反应。在下面的示例中, MyBloc依赖于 OtherBloc,并对OtherBloc中响应状态改变的事件进行dispatch。为了避免内存泄漏,需要在MyBloc中重写dispose方法并关闭StreamSubscription

class MyBloc extends Bloc {
    final OtherBloc otherBloc;
    StreamSubscription otherBlocSubscription;
    
    MyBloc(this.otherBloc) {
        otherBlocSubscription = otherBloc.state.listen((state) {
            // React to state changes here. 在这里响应状态的变化
         // Dispatch events here to trigger changes in MyBloc. 在这里分发事件来触发MyBloc改变
        });
    }
    
    @override
    void dispose() {
        otherBlocSubscription.cancel();
        super.dispose();
    }
}

表现层 Presentation Layer

presentation 职责是弄清如何基于一个或多个bloc状态来渲染自己。此外,它还应该处理用户输入和应用程序生命周期事件。

大多数应用程序流将从一个AppStart事件开始,该事件触发应用程序获取一些数据以呈现给用户。

在这种情况下,presentation层将分发一个AppStart事件。

此外,presentation层必须根据bloc层的状态确定在屏幕上显示的内容。

class PresentationComponent {
    final Bloc bloc;
    PresentationComponent() {
        bloc.dispatch(AppStarted());
    }
    
    build() {
        // render UI based on bloc state
    }
}

推荐阅读更多精彩内容