redux-api-async v2.0.2

开发react+redux项目中,当我们需要向服务器请求数据的时候,就涉及到了异步操作,但是redux中的action是一个消息体,我们怎么办呢，于是就会出现这样的代码

redux-api-async

api/main.js(专门存放异步操作的文件,也可以按模块划分，然后组合到一起)

import Detail from 'detail.js'
export default {
  //getState 能拿到redux的全部状态
  //param 额外的参数
  MAIN_LOAD_DATA:(getState,param)=>{
    return Fetch({url:'',data:param})
  },
  Detail
}

api/detail.js

export default {
  //getState 能拿到redux的全部状态
  //param 额外的参数
  DETAIL_LOAD_DATA:(getState,param)=>{
    return Fetch({url:'',data:param})
  }
}

store.js

...
import apiMiddleware from 'redux-api-async'
import mainApi from './api/main'
const createStoreWithMdware = applyMiddleware(
apiMiddleware( 
  mainApi
)
)(createStore);
...

action.js

import {createAsync,Api} from 'redux-api-async'
export function loadOtherData(){
  return createAsync(
    Api.MAIN_LOAD_DATA,
    {},
    createAsync(
      Api.DETAIL_LOAD_DATA,
      {}
    )
  )
}

只专注action.js你会发现,通过action的嵌套来实现了请求的一次调用,请求依赖的问题 另外还剩下一个问题就是请求参数更新的问题，当我们发送action的时候，我们需要自己去合并参数,而在redux-api-async中的api函数里可以通过getState拿到最新的值，看下例子 api接口

   MAIN_LOAD_DATA:(getState,param)=>{
    const count = getState().main.count
    return Fetch({url:'',data:{count}})
  }

action

  export function changeCount(data){
    return {
      type:'CHANGE_COUNT',
      data,
      ...(createAsync(
        Api.MAIN_LOAD_DATA,
        {},
        createAsync(
          Api.DETAIL_LOAD_DATA,
          {}
        )
      ))
    }
  }

reducer

  ['CHANGE_COUNT']:(state,action)=>{
    return Object.assign({},state,{count:action.data})
  }

但我们发送action,dispatch(changeCount(3))后,MAIN_LOAD_DATA里得到的count就是3

redux-api-async的概念

api

上例中就对应到api/detail.js和api/main.js中的函数

DETAIL_LOAD_DATA:(getState,param)=>{
  //通过getState 可以拿到最新的值
  //param对应到createAsyncd的param
  return Fetch({url:'',data:param})
}

createAsync(type,param,callback,sub) | (type,param,sub)

. type : api名,上例中为MAIN_LOAD_DATA,DETAIL_LOAD_DATA . param : api接口参数,上例中为param . callback : 异步操作成功回调,返回值不为空则作为接下来的请求的param . sub:依赖上一次请求调用成功的另一外一次请求