redux-promise-thunk
Version:
Thunk generator to dispatch Flux-Standard-Action in each phase of promise
48 lines (33 loc) • 1.81 kB
Markdown
This lib can help you dispatch FSA(flux standard action) in each phase of your promise;
You need to use [redux thunk](http://npmjs.com/package/redux-thunk) as one of your middleware to make this lib work.
`npm i redux-promise-thunk`
`createPromiseThunk` will create an `action creator`, but instead of action object, it returns a thunk function, which will be processed by `redux-thunk`.
The action creator created by `createPromiseThunk` only receives **one** parameter and will pass it to `promiseCreator`. Example:
```js
//editTodo is a thunk
const editTodo = createPromiseThunk('EDIT_TODO', function(todo) {
return todoApi.edit(todo); //todoApi.edit() should return a Promise object;
});
//TodoItem.jsx
const {editTodo} = bindActionCreators(actions, dispatch);
class TodoItem extends Component {
//...
handleEdit(todo) {
editTodo(todo);//only one parameter is allowed, and will be passed to promiseCreator;
}
//...
}
```
The thunk function will dispatch following flux standard actions(FSA) for the promise you returned in promiseCreator:
| Name | When | payload | meta.asyncStep |
| -------- | ----- | :----: | :----: |
| `${actionName}_START` | promiseCreator(data) been called | first argument of promiseCreator | 'START' |
| `${actionName}_COMPLETED` | promise resolved | value of promise | 'COMPLETED' |
| `${actionName}_FAILED` | promise rejected | reason of promise | 'FAILED' |
Check `examples/todo-mvc` for further info, the `TodoActions.editTodo` shows optimistic update with composed thunk. and
`loadingMiddleWare` shows how to do some *aspect* things like loading label with `action.meta.asyncStep`