redux异步之redux-thunk

简介

• redux-thunk是redux官方退出的一个异步中间件，thunk表示延迟计算的意思
• 使用中间件之后，我们可以再action构造器中返回一个函数，而不是一个对象

使用

下载

npm install redux-thunk -S

配置

• 这里我们需要使用到redux的一个使用中间件的函数applyMiddleware

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'

import reducer from './reducer'

const store = createStore(
    reducer,
    applyMiddleware(thunk)
)

export default store

这样配置之后，我们就可以再action creator中返回一个函数，并且返回的函数中的参数为dispatch

组件中的使用

首先我们写一个action creator

// 普通的action creator
export const subAction = (num) => {
  return { type: SUB_COUNT, num: num };
};

// 异步的action creator 返回一个函数
export const asyncGetData = (num) => {
  return dispatch => {
    // 在这里进行异步
    setTimeout(() => {
      dispatch(addAction(num))
    },2000)
  }
}

1. 这里，我们可以与普通的action creator来进行对比，我们会发现普通的action creator是返回了一个对象，而异步的action creator是返回了一个函数
2. 在组件中，我们应该这样使用

class Home extends React.PureComponent{
	...
    render(){
        const {getAsyncData} = this.props
        return (
            <div>
            	...
                <button onClick={getAsyncData}>异步递增</button>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch)=>{
    return{
        getAsyncData(){
            dispatch(asyncGetData(1))
        }
    }
}

点击按钮过一段时间之后，我们就会发现相应的数据也会进行改变