RemoteData is an ADT (algebraic data type) described in this article. Heavily based on fp-ts lib.
npm i --save @devexperts/remote-data-ts
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'));
}
}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>
);Coming soon (check the source)
Don't forget to run npm run changelog and to commit the changes