@devexperts/remote-data-ts

RemoteData type

Description

RemoteData is an ADT (algebraic data type) described in this article. Heavily based on fp-ts lib.

Installation

npm i --save @devexperts/remote-data-ts

How to lift (wrap) your data in RemoteData:

As you remember RemoteData is an union of few types: RemoteInitial, RemotePending, RemoteFailure and RemoteSuccess.

While your data in initial or pending state just use initial or pending constant, because you don't have any real values in this case.

import { initial, pending } from '@devexperts/remote-data-ts';

const customers = initial;
// or
const customers = pending;

When you receive data from server, use failure or success function, it depends on what you received:

import { failure, success } from '@devexperts/remote-data-ts';
import { apiClient } from 'apiClient';
import { TCustomer } from './MyModel';

const getCustomers = (): RemoteData<TCustomer[]> => {
   const rawData: TCustomer[] = apiClient.get('/customers');

   try {
        const length = rawData.length;

        return success(rawData);
   }
   catch(err) {
        return failure(new Error('parse error'));
   }
}

How to fold (unwrap) your data from RemoteData:

Finally you pass data to the component and want to render values, so now it's time to get our values back from RemoteData wrapper:

import { NoData, Pending, Failure } from './MyPlaceholders';
import { TCustomer } from './MyModel';

type TCustomersList = {
    entities: RemoteData<TCustomer[]>;
};

const CustomersList: SFC<TCustomersList> = ({ entities }) => entities.foldL(
    () => <NoData />,
    () => <Pending />,
    err => <Failure error={err} />,
    data => <ul>{data.map(item => <li>{item.name}</li>)}</ul>
);

Docs & Examples

Coming soon (check the source)

Contributions

• use https://www.conventionalcommits.org/en/v1.0.0-beta.2/

Publish

Don't forget to run npm run changelog and to commit the changes

Changelog

2.1.1 (2021-09-09)

Bug Fixes

• invalid main and typings path in package.json (#68) (4ca54c3)

Features

• add Fold 3 (#53) (5c26c11), closes #30

• Support for import without lib or es6 (#65) (02b8f08)

• Update constructors to receive all generics (#61) (674a2ac), closes #61

Bug Fixes

• Correct RemoteDataT3 constrant for M (URIS4 -> URIS3) (f81f3b8)

BREAKING CHANGES

• generic parameters changed for success and failure constructors