redux-promise-thunk

This lib can help you dispatch FSA(flux standard action) in each phase of your promise;

You need to use redux thunk as one of your middleware to make this lib work.

Install

npm i redux-promise-thunk

Usage

createPromiseThunk(actionName, promiseCreator [, metaCreator])

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:

//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' |

Example

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