Skip to content

Commit

Permalink
Fix readme highlighting and syntax error in fold example
Browse files Browse the repository at this point in the history
  • Loading branch information
poteto authored and raveclassic committed Aug 15, 2018
1 parent a311dad commit 68e5de5
Showing 1 changed file with 17 additions and 15 deletions.
32 changes: 17 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,31 @@
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`
`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 { apiClient } from 'apiClient';
import { TCustomer } from './MyModel';

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

try {
const length = rawData.length;

Expand All @@ -36,25 +37,26 @@ const getCustomers = (): RemoteData<TCustomer[]> => {
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<TCustomer[]>;
};

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

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

0 comments on commit 68e5de5

Please sign in to comment.