react+redux+redux-deferred实现ajax异步请求，真的良心之作啊！

1、在我做项目的时候，仅仅依靠redux是不能实现ajax异步请求的，网上的教程，真的坑的一逼啊！redux-thunk占主流！但是实现起来坑太多！

2、简单的东西不一定是最好的，但最好的东西一定是简单的，下面我们就用redux-deferred实现异步请求

3、目录结构还和我之前的博客里面的一模一样，链接：http://blog.csdn.net/take_dream_as_horse/article/details/53037060

首先，在项目里安装redux-deferred,命令行语句： npm  install redux-deferred --save

4、moreAction.js文件，定义异步请求接口，我这里用的$.get()（如果要传参的话和之前使用$.get()方法一模一样）

var $=require('jquery');var fetch =require('isomorphic-fetch');//定义处理函数,返回的值let receivePosts=function (){    return {        type: 'add_todo',        payload:$.get('https://api.github.com/users')    }}module.exports=receivePosts;

     5、moreReducer.js文件，取到ajax的值，更新state

////定义方法,用于更新视图let moreReducers= function(state, action){    if(typeof state === 'undefined'){        return [{            login:"这是初始化login",            id:"这是初始化id",            avatar_url:"这是初始化avatar_url",            html_url:"这是初始化html_url",            completed: false        }];    }    //打印ajax取到的值    console.log(action.payload[0]);    switch(action.type){        case 'add_todo':            return state.concat({                login: action.payload[0].login,                id: action.payload[0].id,                avatar_url:action.payload[0].avatar_url,                html_url:action.payload[0].html_url,                completed: false            });            break;        default:            return state;    }};module.exports=moreReducers;

注：还有如果不进行接下来的操作：绑定store文件，打印ajax的值就会undefined

6、moreStore,js文件，绑定store的值，这里就会用到我们之前安装的redux-deferred了

var {createStore,applyMiddleware} = require('redux');var moreReducer=require('../reducers/moreReducer');var DeferredMiddleware =require('redux-deferred');//默认输出let store =createStore(moreReducer,applyMiddleware(DeferredMiddleware));module.exports = store;

7、小伙伴们以为这样就OK了，no no no!

        重点来了：applyMiddleware()方法的源码（applyMiddleware.js）第49行，会return middleware(middlewareAPI),我之前启动的项目的时候，会报错 :middleware is not function。相信大家都知道，报错原因就是它根本就不是一个函数方法

  不要着急，直接打印middleware ，是一个对象好嘛！逗我呢！

middleware.default()才是一个function好嘛！直接修改源码，项目就可以正常跑起来了，附上我修改后的源码

8、直接启动项目，添加一条，看看成功没有。说明：我这里添加没有接口，所以我调用的是github的接口（就是我添加的内容不会展示到页面上，而是展示的其他文本内容），直接截图

（1）点击添加：接口调用成功

（2）接口也有数据返回

（3）视图也成功更新