BLoC (Business Logic of Component) pattern for React.

BLoC 全称: Business Logic of Component, 业务逻辑组件.

BLoC 架构图:

Bloc

Bloc 主要做一些业务逻辑, 事件绑定等功能. 其内部注入了一个 Repository 作为数据源.

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { EnhanceSubject } from 'react-bloc';
import { injectable, inject } from 'inversify';

import { Bloc } from '@arch';
import { BLOC_TYPES, REPOSITORY_TYPES } from './ioc/types';
import ITestDataSource from './data/source/ITestDataSource';

@injectable()
export default class TestBloc extends Bloc {
  @inject(REPOSITORY_TYPES.TestRepository)
  private repository: ITestDataSource;

  private _result = '';
  public result$ = new EnhanceSubject(this._result);

  public handleLocalPress = async () => {
    this._result = await this.repository.fetchData({ isDirty: false });
    this.result$.add(this._result);
  };

  public handleRemotePress = async () => {
    this._result = await this.repository.fetchData({ isDirty: true });
    this.result$.add(this._result);
  };

  public token() {
    return BLOC_TYPES.TestBloc;
  }
}

Repository

Repository 作为 Bloc 唯一的数据源. 内部注入了 LocalDataSource 和 RemoteDataSource 两个数据源, 在其内部进行逻辑判断, 为 Bloc 提供唯一数据.

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { IRepository } from 'react-bloc';
import { injectable, inject } from 'inversify';

import { StrategyProcessor } from '@arch';
import { DATA_SOURCE_TYPES } from '../../ioc/types';
import ITestDataSource from './ITestDataSource';
import { ITestLocalDataSource } from '../source/local/TestLocalDataSource';
import { ITestRemoteDataSource } from '../source/remote/TestRemoteDataSource';

@injectable()
export default class TestRepository implements IRepository, ITestDataSource {
  @inject(DATA_SOURCE_TYPES.TestRemoteDataSource)
  private remoteDataSource: ITestRemoteDataSource;
  @inject(DATA_SOURCE_TYPES.TestLocalDataSource)
  private localDataSource: ITestLocalDataSource;

  public fetchData(params: any) {
    if (params.isDirty) {
      return this.remoteDataSource.fetchData(params);
    } else {
      return this.localDataSource.fetchData(params);
    }
  }
}

DataSource

DataSource 主要分为两种:

1. LocalDataSource: 内部注入了 DBService, 使用 DBService 获取本地数据.

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { ILocalDataSource } from 'react-bloc';
import { injectable, inject } from 'inversify';

import { PROCESSOR } from '@arch';
import { DBService } from '@service';
import ITestDataSource from '../ITestDataSource';

export interface ITestLocalDataSource extends ILocalDataSource, ITestDataSource {}

@injectable()
export class TestLocalDataSource implements ITestLocalDataSource {
  @inject(PROCESSOR.DBService)
  private dbService: DBService;

  public fetchData(params: any) {
    return Promise.resolve('local');
  }
}

1. RemoteDataSource: 内部注入了 WebService, 使用 WebService 调用接口, 获取远程数据.

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { IRemoteDataSource } from 'react-bloc';
import { injectable, inject } from 'inversify';

import { PROCESSOR } from '@arch';
import { WebService } from '@service';
import ITestDataSource from '../ITestDataSource';

export interface ITestRemoteDataSource extends IRemoteDataSource, ITestDataSource {}

@injectable()
export class TestRemoteDataSource implements ITestRemoteDataSource {
  @inject(PROCESSOR.WebService)
  private webService: WebService;

  public fetchData(params: any) {
    return Promise.resolve('remote');
  }
}

BlocProvider (视图标签)

BlocProvider: 使用 BlocProvider 将 Bloc 与 View 进行关联, 使在 View 中, 可以使用 Bloc.

StreamBuilder (视图标签)

StreamBuilder: 响应式视图. 当 Bloc 中数据改变时, 会重构 StreamBuilder.

StreamBuilder 架构图:

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import React from 'react';
import { StyleSheet, Button, Image, ImageStyle, Text, TextStyle, View, ViewStyle } from 'react-native';
import { BlocProvider, IBloc, StreamBuilder, ISnapshot } from 'react-bloc';

import { container } from '@arch';
import { TestBloc, BLOC_TYPES } from '../bloc/index';

interface IStyle {
  container: ViewStyle;
}

export default () => {
  const _testBloc = container.get<IBloc>(BLOC_TYPES.TestBloc);
  return <BlocProvider bloc={_testBloc} child={_viewBuilder} />;
};

function _viewBuilder() {
  const _testBloc = BlocProvider.of<TestBloc>(BLOC_TYPES.TestBloc);
  return (
    <View style={styles.container}>
      <StreamBuilder stream={_testBloc.result$} builder={_contentBuilder} />
    </View>
  );
}

function _contentBuilder(snapshot: ISnapshot<string>) {
  return <Text>{snapshot.data}</Text>;
}

const styles = StyleSheet.create<IStyle>({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});