Skip to content
RemoteData type
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
src feat: Add RemoteDataT transformer (#29) Feb 4, 2019
.editorconfig initial Feb 9, 2018
.npmignore update .npmignore Mar 13, 2018
.travis.yml 0.5.0 Jan 31, 2019
package-lock.json 0.5.0 Jan 31, 2019
tslint.json fix codestyle checks Mar 13, 2018

RemoteData type Build Status


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


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>{ => <li>{}</li>)}</ul>

Docs & Examples

Coming soon (check the source)



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

You can’t perform that action at this time.