Skip to content
RemoteData type
Branch: master
Clone or download
Permalink
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
.gitignore
.npmignore update .npmignore Mar 13, 2018
.prettierrc
.travis.yml
CHANGELOG.md 0.5.0 Jan 31, 2019
README.md
package-lock.json 0.5.0 Jan 31, 2019
package.json
tsconfig.json
tslint.json fix codestyle checks Mar 13, 2018

README.md

RemoteData type Build Status

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

Publish

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

You can’t perform that action at this time.