RemoteData

Typesafe library for representation loadable state.

In web development from project to project, we constantly encounter asynchronous data. The implementation of the loadable falls on the shoulders of the developer and is sometimes redundant: we come up with additional state fields and duplicate the code. RemoteData helps to describe a type-safe data source with the necessary states and provides the minimum required set of functions for processing

1type RemoteData<E, D> = NotAsked | Loading | Reloading | Success<D> | Failure<E>;

Installation

npm i @young-aviator-club/remote-data

Examples

Example	Link
JS + React	Codesandbox
TS + React	Codesandbox
TS + React + Mobx	Codesandbox
TS + React + Mobx (extended)	Codesandbox
JS + React + redux-toolkit .	Codesandbox: Before -> After

More examples coming soon!

Basic usage

1import * as RD from '@young-aviator-club/remote-data';
2
3let loadableResource: RD.RemoteData<Error, number> = RD.notAsked();
4
5const loadResource = () => {
6  console.log((loadableResource = RD.loading()));
7  setTimeout(() => {
8    console.log((loadableResource = RD.success(10)));
9  }, 2000);
10};
11
12console.log(loadableResource);

API

Guards

• RD.isNotAsked(rd)
• RD.isLoading(rd)
• RD.isReloading(rd)
• RD.isSuccess(rd)
• RD.isFailure(rd)

1import * as RD from '@young-aviator-club/remote-data';
2
3let loadableResource: RemoteData<Error, number> = RD.notAsked(); // or another
4
5if (RD.isNotAsked(loadableResource)) {
6  console.log('No state is NOT_ASKED');
7}
8
9loadableResource = RD.loading();
10
11if (RD.isLoading(loadableResource)) {
12  console.log('No state is LOADING');
13}
14
15loadableResource = RD.failure(new Error('error'));
16
17if (RD.isFailure(loadableResource)) {
18  // typesafe access to error
19  console.log('Failure!', loadableResource.error.message); // "error"
20}
21
22loadableResource = RD.success(100);
23
24if (RD.isSuccess(loadableResource)) {
25  // typesafe access to data
26  console.log('Success', loadableResource.data); // 100
27}

Working with array of RemoteData

1import * as RD from '@young-aviator-club/remote-data';
2
3let loadableResource1: RemoteData<Error, number> = RD.notAsked();
4let loadableResource2: RemoteData<Error, number> = RD.notAsked();
5
6if (RD.isNotAsked([loadableResource1, loadableResource2])) {
7  console.log('Now states is NOT_ASKED');
8}
9
10loadableResource1 = RD.loading(); // only one resouce in loading state
11
12if (RD.isLoading([loadableResource1, loadableResource2])) {
13  // loadableResource1 = LOADING, loadableResource2 = NOT_ASKED
14  // in this case array of RemoteData is LOADING
15  console.log('Now states is LOADING');
16}
17
18loadableResource2 = RD.failure(new Error('error'));
19
20if (RD.isFailure([loadableResource1, loadableResource2])) {
21  // if some resource is failed - array of RemoteData is failed
22  console.log('Failure!');
23}
24
25loadableResource1 = RD.success(1);
26loadableResource2 = RD.success(2);
27
28if (RD.isSuccess([loadableResource1, loadableResource2])) {
29  // if each RemoteData in array is SUCCESS - true
30  console.log('Success', loadableResource1.data + loadableResource2.data); // 3
31}

Error handling / accessor

• RD.successOrElse(rd, orElse)

1import * as RD from '@young-aviator-club/remote-data';
2
3let loadableResource: RemoteData<Error, number> = RD.notAsked(); // or another
4
5console.log(RD.successOrElse(loadableResource, () => -1)); // -1
6
7loadableResource = RD.success(100);
8
9console.log(RD.successOrElse(loadableResource, () => -1)); // 100
10
11// for array of RemoteData
12
13let loadableResource1: RemoteData<Error, number> = RD.notAsked();
14let loadableResource2: RemoteData<Error, number> = RD.notAsked();
15
16console.log(RD.successOrElse([loadableResource1, loadableResource2], () => -1)); // -1
17
18loadableResource1 = RD.success(1);
19
20// -1 because second RemoteData is NOT_ASKED
21console.log(RD.successOrElse([loadableResource1, loadableResource2], () => -1)); // -1
22
23loadableResource2 = RD.success(2);
24
25console.log(RD.successOrElse([loadableResource1, loadableResource2], () => -1)); // [1, 2]

Pattern matching

• RD.fold(rd, handlers)

1import * as RD from '@young-aviator-club/remote-data';
2
3let loadableResource: RemoteData<Error, number> = RD.notAsked();
4
5const handleState = (rd: RemoteData<Error, number>) => {
6  return RD.fold(rd, {
7    notAsked: () => 'no data',
8    loading: () => 'loading...',
9    reloading: () => 'reloading...',
10    success: (num) => `result: ${num}`,
11    failure: (err) => `error: ${err.message}`,
12  });
13};
14
15handleState(loadableResource); // "no data"
16
17loadableResource = RD.loading();
18handleState(loadableResource); // "loading..."
19
20loadableResource = RD.reloading();
21handleState(loadableResource); // "reloading..."
22
23loadableResource = RD.failure(new Error('error'));
24handleState(loadableResource); // "error: error"
25
26loadableResource = RD.success(2);
27handleState(loadableResource); // "result: 2"

with array of RemoteData:

1import * as RD from '@young-aviator-club/remote-data';
2
3let loadableResource1: RemoteData<Error, number> = RD.notAsked();
4let loadableResource2: RemoteData<Error, number> = RD.notAsked();
5
6const handleState = (rds: RemoteData<Error, number>[]) => {
7  return RD.fold(rds, {
8    notAsked: () => 'no data',
9    loading: () => 'loading...',
10    reloading: () => 'reloading...',
11    success: ([num1, num2]) => `result: ${num1 + num2}`,
12    failure: ([err1, err2]) => `errors: ${err1.message}, ${err2.message}`,
13  });
14};
15
16handleState(loadableResource); // "no data"
17
18loadableResource1 = RD.loading();
19loadableResource2 = RD.loading();
20handleState(loadableResource); // "loading..."
21
22loadableResource1 = RD.failure(new Error('error1'));
23loadableResource2 = RD.failure(new Error('error2'));
24handleState(loadableResource); // "errors: error1, error2"
25
26loadableResource1 = RD.success(1);
27loadableResource2 = RD.success(2);
28handleState(loadableResource); // "result: 3"