redux-actions-promise
v1.1.5
Published
FSA-compliant promise middleware for Redux, supports referencing dispatcher/state in action
Downloads
7
Maintainers
Readme
redux-actions-promise
FSA-compliant promise middleware for Redux, supports referencing dispatcher/state in action.
Installation
Install the pkg with npm:
npm install redux-actions-promise --save
or yarn
yarn add redux-actions-promise
or bower
bower install redux-actions-promise
Usage
// store.js
// create store
import ReduxActionsPromise from 'redux-actions-promise';
import { createStore, applyMiddleware } from 'redux';
// Note: this API requires redux@>=3.1.0
export default createStore(rootReducer, applyMiddleware(ReduxActionsPromise));
// actions.js
import {createAction} from 'redux-actions';
// async action
export let addToDo = createAction(CONSTANT.ADD_TODO, (val) => async (dispatch, getState) => {
console.log('prev state', getState())
let v = await Promise.resolve('todo: ' + val);
return v;
});
// sync action
export let deleteToDo = createAction(CONSTANT.DELETE_TODO);
FAQ
- why not use redux-thunk ?
- I would like to use
createAction
for FSA. - I don't want to handle promise error in action by myself.
In redux-thunk
:
addToDo = (val) => async (dispatch, getState) => {
let v = await Promise.reject('error');
// can't output in console
console.log('addToDo');
dispatch({
type: "ADD_TODO",
payload: {
val: v
}
})
};
If promise is rejected, the programme will be abort. So if you don't want this happen, you should handle it by yourself:
addToDo = (val) => async (dispatch, getState) => {
try{
let v = await Promise.reject('error');
// can't output in console
console.log('addToDo');
dispatch({
type: "ADD_TODO",
payload: {
val: v
}
})
} catch(e) {
dispatch({
type: "ADD_TODO_ERROR",
payload: e,
error: true
})
}
};
Use async-await-error-handling maybe simple the code:
import awaitTo from 'async-await-error-handling';
//...
addToDo = (val) => async (dispatch, getState) => {
const [err, data] = await awaitTo(Promise.reject('error'));
if(err){
dispatch({
type: "ADD_TODO_ERROR",
payload: e,
error: true
});
return;
}
dispatch({
type: "ADD_TODO",
payload: {
val: data
}
});
};
- why not use redux-promise ?
Because it doesn't support referencing dispatcher or state in action. See #20.
LICENSE
MIT