redux-asyn v1.2.7

Redux Asyn

a redux middleware that support async actions for concise usage.

Installation

npm install redux-asyn 

Usage

To enable redux-asyn, use applyMiddleware():

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:

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

// '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, after some async process finished,you just return the action rather than dispatch it manually.Here is a simple example

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

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!