react-redux 异步请求实例解析

首先我们需要用node搭建一个后台。模拟真实接口。我们采用koa2作为后台，建立web服务器

代码如下：

---------------------------------------------------------------------------------------------

react脚手架中，我们需要在package.json中设置proxy

我们请求的接口会以localhost:8989为baseurl进行请求。本例中我们会'/api/getInfo为例子进行请求。效果是当我们点击一个按钮的时候，发起请求，出现loading效果。数据请求成功以后显示数据.为了真实的模拟这个场景。我们对后端数据做了延迟处理。

-------------------------------------------------------------------------------------------------------------

一个redux的基本流程是  事件触发会通过store.dispatch 一个action，进而触发reducer，在reducer中通过判断到底是哪个action触发的。从而进行逻辑处理。返回数据。因为createStore接收store作为参数，所以ruducer返回的数据最后直接导致 了store的变化，而store被注入到了根组件中，这样只要reducer变换了，子组件获取到的store就是变化以后的store。

再回到异步请求，因为redux规定：action只能是一个对象。而刚刚讲到的redux的整个流程，store是唯一数据源，store.dispatch阶段不可能进行异步请求，而reducer只负责处理actions传过来的数据，然后再加工返回。也不可能做异步处理，只能在action阶段做文章。我们通过一定的手段让action不再只是一个对象，而是一个函数。因为是函数，就有无限种可能。如何实现呢？我们引入了中间件机制。本例中就用的是redux-thunk.

-----------------------------------------------------------------

store.js

引入redux-thunk以后，我们可以把action定义为函数。在函数中再返回一个对象。对于一个异步请求，至少需要有3种状态，请求加载中，请求成功，请求失败。我们分别定义3个action来对应这三种状态。然后再定义一个action--FetchData，代表我们真正请求索要派发出去的action。

-----------------------------------------------------------------

actions:

-----------------------------------------------------------------

reducer：

我们希望最后返回出去的数据格式具备一个loading字段。表示是否需要加载，一个data字段。表示最后返回的真正数据

----------------------------------------------------------------------------------

 

actions、reducer 和中间件redux--thunk对action的改造都已经准备完毕。接下来我们需要在组件中处理逻辑

我们这个页面是about.js

import React,{Component} from "react"

import {FetchData} from "../actions/actions"

import {connect} from "react-redux"

class About extends Component{

     constructor(props){

     super()

     this.getData=this.getData.bind(this)

}

getData(){

     let data={

         pageNum:0,

         pageSize:10

      }

     this.props.fetch(data)

}

render(){

let {data}=this.props

return(

<section>

<p>about</p>

<p><input type="button" value='发请求' onClick={this.getData}/></p>

{

data.loading?<p><img src="loading.gif" alt=""/></p>:data.res&&data.res.map((item,index)=>(

<span key={index} style={{display:'inline-block',marginRight:'right'}}>{item.name}</span>

))

}

</section>

)

}

}

function mapState(state){

return {

data:state

}

}

function mapDispatch(dispatch){

    return {

        fetch: (...args)=>dispatch(FetchData(...args))

    }

}

export default connect(mapState,mapDispatch)(About)

至此。当我们点击按钮的时候。会出现加载中的loading效果，而数据获取到以后，则会显示真正的数据