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）视图也成功更新

原文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/53078823