Skip to content

Commit eaa8f87

Browse files
potetoraveclassic
authored andcommitted
docs: Fix readme highlighting and syntax error in fold example
1 parent 824538f commit eaa8f87

File tree

1 file changed

+17
-15
lines changed

1 file changed

+17
-15
lines changed

README.md

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,31 @@
33
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.
44

55
### Installation
6-
`npm i --save @devexperts/remote-data-ts`
6+
`npm i --save @devexperts/remote-data-ts`
77

88
### How to lift (wrap) your data in RemoteData:
99
As you remember RemoteData is an union of few types: `RemoteInitial`, `RemotePending`, `RemoteFailure` and `RemoteSuccess`.
1010

1111
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.
1212

13-
```
13+
```ts
1414
import { initial, pending } from '@devexperts/remote-data-ts';
15-
15+
1616
const customers = initial;
1717
// or
1818
const customers = pending;
1919
```
20-
20+
2121
When you receive data from server, use `failure` or `success` function, it depends on what you received:
22-
```
22+
23+
```ts
2324
import { failure, success } from '@devexperts/remote-data-ts';
24-
import { apiClient } from 'apiClient';
25+
import { apiClient } from 'apiClient';
2526
import { TCustomer } from './MyModel';
26-
27+
2728
const getCustomers = (): RemoteData<TCustomer[]> => {
2829
const rawData: TCustomer[] = apiClient.get('/customers');
29-
30+
3031
try {
3132
const length = rawData.length;
3233

@@ -36,25 +37,26 @@ const getCustomers = (): RemoteData<TCustomer[]> => {
3637
return failure(new Error('parse error'));
3738
}
3839
}
39-
```
40+
```
4041

4142
### How to fold (unwrap) your data from RemoteData:
4243
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:
43-
```
44+
45+
```ts
4446
import { NoData, Pending, Failure } from './MyPlaceholders';
4547
import { TCustomer } from './MyModel';
46-
48+
4749
type TCustomersList = {
4850
entities: RemoteData<TCustomer[]>;
4951
};
50-
52+
5153
const CustomersList: SFC<TCustomersList> = ({ entities }) => entities.foldL(
5254
() => <NoData />,
5355
() => <Pending />,
5456
err => <Failure error={err} />,
55-
data => <ul>{data.map(item => <li>{item.name}</li>)}</ul>),
56-
)
57-
```
57+
data => <ul>{data.map(item => <li>{item.name}</li>)}</ul>
58+
);
59+
```
5860

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

0 commit comments

Comments
 (0)