Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dwqs/redux-actions-promise
:rabbit: :cat: :bear: FSA-compliant promise middleware for Redux, supports referencing dispatcher/state in action.
https://github.com/dwqs/redux-actions-promise
fsa fsa-actions middleware promise redux redux-middleware
Last synced: 3 months ago
JSON representation
:rabbit: :cat: :bear: FSA-compliant promise middleware for Redux, supports referencing dispatcher/state in action.
- Host: GitHub
- URL: https://github.com/dwqs/redux-actions-promise
- Owner: dwqs
- License: mit
- Created: 2017-07-23T10:53:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-23T08:29:56.000Z (over 6 years ago)
- Last Synced: 2024-09-21T19:32:26.221Z (4 months ago)
- Topics: fsa, fsa-actions, middleware, promise, redux, redux-middleware
- Language: TypeScript
- Homepage:
- Size: 49.8 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/dwqs/redux-actions-promise)   
# 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
1. why not use [redux-thunk](https://github.com/gaearon/redux-thunk) ?
* I would like to use `createAction` for [FSA](https://github.com/acdlite/flux-standard-action).
* 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](https://github.com/dwqs/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
}
});
};
```
2. why not use [redux-promise](https://github.com/acdlite/redux-promise) ?
Because it doesn't support referencing dispatcher or state in action. See [#20](https://github.com/acdlite/redux-promise/issues/20).
## LICENSE
MIT