Skip to content

Commit 750524f

Browse files
authored
Merge pull request #191 from agraboso/thunk-docs
add docs on redux-thunk usage to readme
2 parents 5f63cf0 + 8e3480a commit 750524f

File tree

1 file changed

+43
-4
lines changed

1 file changed

+43
-4
lines changed

README.md

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,8 @@ RSAAs are identified by the presence of an `[RSAA]` property, where [`RSAA`](#rs
3131
- [Bailing out](#bailing-out)
3232
- [Lifecycle](#lifecycle)
3333
- [Customizing the dispatched FSAs](#customizing-the-dispatched-fsas)
34+
- [Dispatching Thunks](#dispatching-thunks)
3435
- [Testing](#testing)
35-
- [actions/user.js](#actionsuserjs)
36-
- [actions/user.test.js](#actionsusertestjs)
3736
- [Reference](#reference)
3837
- [*Request* type descriptors](#request-type-descriptors)
3938
- [*Success* type descriptors](#success-type-descriptors)
@@ -387,11 +386,51 @@ If a custom `payload` and `meta` function throws an error, `redux-api-middleware
387386
388387
A noteworthy feature of `redux-api-middleware` is that it accepts Promises (or function that return them) in `payload` and `meta` properties of type descriptors, and it will wait for them to resolve before dispatching the FSA — so no need to use anything like `redux-promise`.
389388
389+
### Dispatching Thunks
390+
391+
You can use `redux-thunk` to compose effects, dispatch custom actions on success/error, and implement other types of complex behavior.
392+
393+
See [the Redux docs on composition](https://github.com/reduxjs/redux-thunk#composition) for more in-depth information, or expand the example below.
394+
395+
<details>
396+
<summary>Example</summary>
397+
398+
```js
399+
export function patchAsyncExampleThunkChainedActionCreator(values) {
400+
return async(dispatch, getState) => {
401+
const actionResponse = await dispatch({
402+
[CALL_API]: {
403+
endpoint: "...",
404+
method: "PATCH",
405+
body: JSON.stringify(values),
406+
headers: {
407+
"Accept": "application/json",
408+
"Content-Type": "application/json",
409+
},
410+
types: [PATCH, PATCH_SUCCESS, PATCH_FAILED]
411+
}
412+
});
413+
414+
if (actionResponse.error) {
415+
// the last dispatched action has errored, break out of the promise chain.
416+
throw new Error("Promise flow received action error", actionResponse);
417+
}
418+
419+
// you can EITHER return the above resolved promise (actionResponse) here...
420+
return actionResponse;
421+
422+
// OR resolve another asyncAction here directly and pass the previous received payload value as argument...
423+
return await yourOtherAsyncAction(actionResponse.payload.foo);
424+
};
425+
}
426+
```
427+
</details>
428+
390429
### Testing
391430
392431
To test `redux-api-middleware` calls inside our application, we can create a fetch mock in order to simulate the response of the call. The `fetch-mock` and `redux-mock-store`packages can be used for this purpose as shown in the following example:
393432
394-
##### actions/user.js
433+
**actions/user.js**
395434
396435
```javascript
397436
export const USER_REQUEST = '@@user/USER_REQUEST'
@@ -412,7 +451,7 @@ export const getUser = () => ({
412451
})
413452
```
414453
415-
##### actions/user.test.js
454+
**actions/user.test.js**
416455
417456
```javascript
418457
// This is a Jest test, fyi

0 commit comments

Comments
 (0)