Skip to content

Commit 05ce67c

Browse files
committed
Fixes grammar, typos, and markdown syntax
1 parent dff4268 commit 05ce67c

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

README.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
React Refetch
22
=========================
3+
34
A simple, declarative, and composable way to fetch data for React components.
45

56
![React Refetch Logo](logo.png)
@@ -100,7 +101,7 @@ connect(props => ({
100101
}))(UsersList)
101102
```
102103

103-
Setting `force: true` should be avoid if at all possible because it could result in extraneous data fetching and rendering of the component. Try to use the default comparison or custom `comparison` option instead.
104+
Setting `force: true` should be avoided if at all possible because it could result in extraneous data fetching and rendering of the component. Try to use the default comparison or custom `comparison` option instead.
104105

105106
## Automatic Refreshing
106107

@@ -113,7 +114,7 @@ connect(props => ({
113114
}))(Profile)
114115
```
115116

116-
When refreshing, the `PromiseState` will be the same as a the previous `fulfilled` state, but with the `refreshing` attribute set. That is, `pending` will remain unset and the existing `value` will be left in tact. When the refresh completes, `refreshing` will be unset and the `value` will be updated with the latest data. If the refresh is rejected, the `PromiseState` will move into a `rejected` and not attempt to refresh again.
117+
When refreshing, the `PromiseState` will be the same as the previous `fulfilled` state, but with the `refreshing` attribute set. That is, `pending` will remain unset and the existing `value` will be left intact. When the refresh completes, `refreshing` will be unset and the `value` will be updated with the latest data. If the refresh is rejected, the `PromiseState` will move into a `rejected` and not attempt to refresh again.
117118

118119
## Fetch Functions
119120

@@ -191,7 +192,7 @@ Note, the example above sets `force: true` and `refreshing: true` on the request
191192

192193
### Posting + Refreshing Data
193194

194-
The two examples above can be combined to post data to the server and refresh an existing `PromiseState`. This is a common pattern when a responding to a user action to update a resource and reflect that update in the component. For example, if `PATCH /users/:user_id` responds with the updated user, it can be used to overwrite the existing `userFetch` when the user updates her name:
195+
The two examples above can be combined to post data to the server and refresh an existing `PromiseState`. This is a common pattern when responding to a user action to update a resource and reflect that update in the component. For example, if `PATCH /users/:user_id` responds with the updated user, it can be used to overwrite the existing `userFetch` when the user updates her name:
195196

196197
```jsx
197198
connect(props => ({
@@ -331,7 +332,7 @@ Note, this form of transformation is similar to what is possible on the `Promise
331332

332333
**Identity requests can also be provided a `Promise` (or any "thenable") or a `Function`.**
333334
If `value` is a `Promise`, the `PromiseState` will be `pending` until the `Promise` is resolved. This can be helpful for asynchronous, non-fetch operations (e.g. file i/o) that want to use a similar pattern as fetch operations.
334-
If `value` is a `Function`, it will be evaluated with no arguments and its return value will be used instead, as in cases described above. The `Function` will be only be called when `comparison` changes. This can be helpful for cases where you want to provide an identify request, but it is expensive to evaluate. By wrapping it in a function, it is only evaluated when something changes.
335+
If `value` is a `Function`, it will be evaluated with no arguments and its return value will be used instead, as in cases described above. The `Function` will only be called when `comparison` changes. This can be helpful for cases where you want to provide an identify request, but it is expensive to evaluate. By wrapping it in a function, it is only evaluated when something changes.
335336

336337
```jsx
337338
connect(props => ({
@@ -492,9 +493,9 @@ connect.defaults({ fetch: cachingFetch })(props => ({
492493
}))(Profile)
493494
```
494495

495-
When using this feature, make sure to read the [`fetch` API and interface documentation](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and all related topics. Notably, you need to keep in mind that the `body` of a `Response` can _only be consumed once_, so if you need to read it in your custom `fetch`, you also need to recreate a brand new `Response` (or a `.clone()` of the original one if you're not modifying the body) so React Refetch can work properly.
496+
When using this feature, make sure to read the [`fetch` API and interface documentation](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and all related topics. Notably, you need to keep in mind that the `body` of a `Response` can *only be consumed once*, so if you need to read it in your custom `fetch`, you also need to recreate a brand new `Response` (or a `.clone()` of the original one if you're not modifying the body) so React Refetch can work properly.
496497

497-
This is an _advanced feature_. Use existing declarative functionality wherever possible. Customise `buildRequest` or `handleResponse` if these can work instead. Please be aware that changing the `fetch` (or `Request`) implementation could conflict with built-in current or future functionality.
498+
This is an *advanced feature*. Use existing declarative functionality wherever possible. Customise `buildRequest` or `handleResponse` if these can work instead. Please be aware that changing the `fetch` (or `Request`) implementation could conflict with built-in current or future functionality.
498499

499500
## Unit Testing Connected Components
500501

@@ -554,7 +555,6 @@ const c = shallow(
554555
expect(c.find(ErrorBox).first().prop().error).toEqual(expectedError)
555556
```
556557

557-
558558
```jsx
559559
const user = new User()
560560

@@ -649,7 +649,7 @@ export default connect(props => {
649649

650650
If you are using React Refetch in a project that is using TypeScript, this library ships with type definitions.
651651

652-
Below is example connected component in TypeScript. Note how there is both an `OuterProps` and `InnerProps`. The `OuterProp` are the props the component receives from the outside. In this example, the `OuterProps` would just be `userId: string` the caller is expected to pass in (e.g. `<UserWidget userId="user-123"/>`). The `InnerProps` are the `PromiseState` props that the `connect()` function injects into the component when fetching data. Since the `InnerProps` include the `OuterProps`, they are defined as `InnerProps extends OuterProps` and then the component itself `extends React.Component<InnerProps>`. This allows the component to have access to both the `userId: string` and `userFetch: PromiseState<User>` internally. However, the `connect` function returns a component with only the `OuterProps` (e.g. `React.Component<OuterProps>`) so callers only need to pass in `userId: string`.
652+
Below is an example connected component in TypeScript. Note how there is both an `OuterProps` and `InnerProps`. The `OuterProp` are the props the component receives from the outside. In this example, the `OuterProps` would just be `userId: string` the caller is expected to pass in (e.g. `<UserWidget userId="user-123"/>`). The `InnerProps` are the `PromiseState` props that the `connect()` function injects into the component when fetching data. Since the `InnerProps` include the `OuterProps`, they are defined as `InnerProps extends OuterProps` and then the component itself `extends React.Component<InnerProps>`. This allows the component to have access to both the `userId: string` and `userFetch: PromiseState<User>` internally. However, the `connect` function returns a component with only the `OuterProps` (e.g. `React.Component<OuterProps>`) so callers only need to pass in `userId: string`.
653653

654654
```tsx
655655
interface OuterProps {

0 commit comments

Comments
 (0)