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操作。例如会提供一些createData，readData，updateData，和deleteData方法来作为数据层的一部分。

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

仓库 （Repository）

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

class Repository  {
    final DataProviderA dataProviderA;
    final DataProviderB dataProviderB;
    
    Future 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
    }
}