https://github.com/devexperts/remote-data-ts

RemoteData type
https://github.com/devexperts/remote-data-ts

algebraic-data-types fp-ts functional-programming typescript

Last synced: about 2 months ago
JSON representation

RemoteData type

• Host: GitHub
• URL: https://github.com/devexperts/remote-data-ts
• Owner: devexperts
• License: mpl-2.0
• Created: 2018-03-13T10:24:48.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-10-16T18:51:03.000Z (11 months ago)
• Last Synced: 2024-04-14T11:00:57.271Z (5 months ago)
• Topics: algebraic-data-types, fp-ts, functional-programming, typescript
• Language: TypeScript
• Homepage:
• Size: 1.44 MB
• Stars: 289
• Watchers: 32
• Forks: 29
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-fp-ts - devexperts/remote-data-ts - algebraic data type (Domain modeling in TypeScript by Benoit Ruiz)

README

        
# RemoteData type [![Build Status](https://travis-ci.org/devexperts/remote-data-ts.svg?branch=master)](https://travis-ci.org/devexperts/remote-data-ts)

### Description

RemoteData is an ADT (algebraic data type) described in [this article](https://medium.com/@gcanti/slaying-a-ui-antipattern-with-flow-5eed0cfb627b). Heavily based on [fp-ts](https://github.com/gcanti/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.

```ts

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:

```ts

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

import { apiClient } from 'apiClient';

import { TCustomer } from './MyModel';

const getCustomers = (): RemoteData => {

   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:

```ts

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

import { TCustomer } from './MyModel';

type TCustomersList = {

    entities: RemoteData;

};

const CustomersList: SFC = ({ entities }) => entities.foldL(

    () => ,

    () => ,

    err => ,

    data => 
{data.map(item => 
{item.name}
)}

);

```


### Docs & Examples

Coming soon (check the [source](src/remote-data.ts))

### 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