# redux-asyn

> a redux middleware that support async actions for concise usage

Latest version **1.2.7** (published 2016-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-asyn
pnpm add redux-asyn
yarn add redux-asyn
bun add redux-asyn
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.7 |
| Published | 2016-07-29 |
| First published | 2016-05-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | mutefish0 |
| Maintainers | mutefish0 |
| Keywords | redux, react, redux-asyn, action, middleware, asynchronous action |

## Links

- npm: https://www.npmjs.com/package/redux-asyn
- Repository: https://github.com/Mutefish0/redux-asyn
- Homepage: https://github.com/Mutefish0/redux-asyn#readme
- Issues: https://github.com/Mutefish0/redux-asyn/issues
- npm.io page: https://npm.io/package/redux-asyn

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.7 (latest) — 2016-07-29
- 1.2.6 — 2016-06-13
- 1.2.5 — 2016-06-13
- 1.2.4 — 2016-06-03
- 1.2.2 — 2016-06-03
- 1.2.0 — 2016-05-20
- 1.1.0 — 2016-05-20
- 1.0.6 — 2016-05-20
- 1.0.4 — 2016-05-20
- 1.0.3 — 2016-05-20
- 1.0.2 — 2016-05-20
- 1.0.1 — 2016-05-20
- 1.0.0 — 2016-05-20

## README

# Redux Asyn

[![npm](https://img.shields.io/badge/npm-v1.2.7-blue.svg)](https://www.npmjs.com/package/redux-asyn)

a redux [middleware](http://redux.js.org/docs/advanced/Middleware.html) that support async actions for concise usage.

## Installation
```js
npm install redux-asyn 
```

## Usage

To enable redux-asyn, use [`applyMiddleware()`](http://redux.js.org/docs/api/applyMiddleware.html):
```js
import { createStore, applyMiddleware } from 'redux'
import asynMiddleware from 'redux-asyn'
import appReducer from './reducers/index'

const store = createStore(
  appReducer,
  applyMiddleware(asynMiddleware)
)
```

Then,you can define an asyc action simply by including a `asyn` property in your action:  
```js
//define an normal action 
export const ASYN_SUCCESS = {
  type : 'ASYN_SUCCESS'
}
 
//define an asyn action
export const SOME_ASYN_ACTION = {
    // like normal action, `type` property is required
    type : 'SOME_ASYN_ACTION',
    
    // for asyn action, 'asyn' property is  required additional
    // asyn must be a function, which will be called by accepting a object that include `dispatch` and 
    // the extra payload  after 'SOME_ASYN_ACTION' was dispatched
    asyn :  ({dispatch,payloadA,payloadB}) => {
          //here you can access  'payloadA' and 'payloadB' 
          console.log(payloadA)
          console.log(payloadB)
          //do some asyn work,for example:
          setTimeout(()=>{
            //after asyn finished, you can dispatch some normal action like 'ASYN_SUCESS'
            dispatch(ASYN_SUCCESS)
            console.log('asyn procedure finished')
          },1000)
    }
    
    /* you can add the payload here, it depends on your since it dose not do any influence
    ,
    paloadA : null,
    paloadB : null,
    */
}
```

Now, you can dispatch the asyn action anywhere:
```js
// 'payloadA' and 'payloadB' will be passed to your `asyn` function defined in your 'SOME_ASYN_ACTION'
let anAction = {...SOME_ASYN_ACTION, payloadA : 'some payload a', payloadB : 'some payload b'} 
dispatch(anAction)

// result:
// action SOME_ASYN_ACTION dispatched 
// console: some payload a
// console: some payload b
// one second after... 
// action ASYN_SUCCESS dispatched
// console: asyn procedure finished
```
##Support Async Function 
Since v1.2.4,property `asyn` can accept an [Async Function](https://tc39.github.io/ecmascript-asyncawait/), after some async process finished,you just return the action rather than dispatch it manually.Here is a simple example 
```js
export const SOME_FETCH = {
    type   : 'SOME_FETCH',
    asyn   : async function(/*{now you don't need `dispatch` anymore}*/){
        try{
            let response = await fetch('/')
            let text = await response.text()
            console.log(text)
            return SOME_FETCH_SUCCESS
        }
        catch(e){
            console.log(e.message)
            return SOME_FETCH_FAILED
        }
    }
}

export const SOME_FETCH_SUCCESS = {
    type   : 'SOME_FETCH_SUCCESS'
}

export const SOME_FETCH_FAILED = {
    type   : 'SOME_FETCH_FAILED'
}
```
##Action Chain
`asyn` can be just another action,which will be dispatched after the asyn action dispatched,we can change the code above
```js
export const SOME_FETCH = {
    type   : 'SOME_FETCH',
    asyn   : async function(/*{now you don't need `dispatch` anymore}*/){
        try{
            let response = await fetch('/')
            let text = await response.text()
            console.log(text)
            return SOME_FETCH_SUCCESS
        }
        catch(e){
            console.log(e.message)
            return SOME_FETCH_FAILED
        }
    }
}

export const SOME_FETCH_SUCCESS = {
    type   : 'SOME_FETCH_SUCCESS'
    asyn   : DO_SOMETHING_INTERSTING
}

export const SOME_FETCH_FAILED = {
    type   : 'SOME_FETCH_FAILED'
}

export const DO_SOMETHING_INTERESTING = {
    type  : 'DO_SOMETHING_INTERESTING'
}
```
`DO_SOMETHING_INTERESTING` will be dispatched after `SOME_FETCH_SUCCESS` was dispatched

That's all!

---
_Source: https://npm.io/package/redux-asyn · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._