ActiveJS exposes an AsyncSystemBase class that can be used to create customized AsyncSystem like Systems.

One limitation of AsyncSystem is that it doesn't let you change the type of Units used by it. With AsyncSystemBase you can create your own AsyncSystem like Systems and use any type of Unit you want as queryUnit, dataUnit and errorUnit.

AsyncSystemBase can be utilized in two ways,

1. Direct Usage

Instead of creating an instance of AsyncSystem where the Units are created internally, you can create the Units yourself and pass them to the AsyncSystemBase directly.

const customAsyncSystem = new AsyncSystemBase(
  new ListUnit<string>(), // queryUnit
  new DictUnit<{ a: number, b: string }>(), // dataUnit
  new GenericUnit<number>(), // errorUnit
  new BoolUnit(), // pendingUnit
  {clearErrorOnData: false} // config is optional
);
​
// extract the Units from the System
const {queryUnit, dataUnit, errorUnit, pendingUnit} = customAsyncSystem;
​
// confirm the type of Units
queryUnit instanceof ListUnit // true
dataUnit instanceof DictUnit // true
errorUnit instanceof GenericUnit // true
pendingUnit instanceof BoolUnit // true

2. Extend the AsyncSystemBase class

If you don't want to create Units every time you want to create a custom AsyncSystem, you can extend the base class and do the same thing that AsyncSystem does, abstract away the Unit creation in the extended class and only accept typings through generics. This will allow you to be more efficient while still staying flexible.

Example: Create a custom AsyncSystem that uses ListUnit as queryUnit, DictUnit as dataUnit and GenericUnit as errorUnit.

Implementation:

// accept the types for queryUnit, dataUnit and erroUnit as generics
export class CustomAsyncSystem<Query, Data, Error>
​
// extend the base class and pass the Units with types as generics
extends AsyncSystemBase<ListUnit<Query>, DictUnit<Data>, GenericUnit<Error>> {
​
  // accept config options optionally to pass them to the base class
  constructor(config?: AsyncSystemBaseConfig<Query, Data, Error>) {
 
    // create the Units and pass them to the base class along with the config
    super(
       new ListUnit(), 
       new DictUnit(),
       new GenericUnit(),
       new BoolUnit(),
       config
    );
 }
}

Usage:

type QueryType = number; // type for queryUnit's value
type DataType = string; // type for dataUnit's value
type ErrorType = {status: number, message: string}; // type for errorUnit's value
​
// initialize a CustomSyncSystem, pass the types as generics
const customSystem = new CustomAsyncSystem<QueryType, DataType, ErrorType>();
// that's it
​
// checking the types of Units
queryUnit instanceof ListUnit // true
dataUnit instanceof DictUnit // true
errorUnit instanceof GenericUnit // true
pendingUnit instanceof BoolUnit // true

Notes

When using a custom AsyncSystem, directly or by extending, there are a few things that you should keep in mind, to get the expected results.

​AsyncSystem uses GenericUnit because it's very permissive in what it accepts as its value while other Units only allow a specific data type, this difference in behavior might cause a hung state, for example, if we use a DictUnit as the dataUnit and we try to dispatch an array value, it will get ignored and any observer expecting a new value wouldn't receive it. Additionally, pendingUnit wouldn't be updated automatically. (i.e. It'll stay true until successful data or error dispatch)

To mitigate this problem, when using a non-GenericUnit as a dataUnit or errorUnit, ensure that the value being dispatched is valid and will be dispatched. Every Unit has a wouldDispatch method for exactly this kind of scenario.