简介

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)}
}

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

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

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

redux异步之redux-thunk相关推荐

Redux 异步数据流-- thunk中间件源码解析
Thunk 引入背景这是一个关于Redux异步数据流的故事.引入thunk中间件的完整故事在Redux官方中文文档异步数据流.一句话总结就是:原生Redux只支持同步数据流,所以需要引入中间件(mi ...
精益 React 学习指南（Lean React）- 3.4 掌控 redux 异步
书籍完整目录 3.4 redux 异步在大多数的前端业务场景中,需要和后端产生异步交互,在本节中,将详细讲解 redux 中的异步方案以及一些异步第三方组件,内容有: redux 异步流 redux ...
Redux异步解决方案之Redux-Thunk原理及源码解析
前段时间,我们写了一篇Redux源码分析的文章,也分析了跟React连接的库React-Redux的源码实现.但是在Redux的生态中还有一个很重要的部分没有涉及到,那就是Redux的异步解决方案.本 ...
redux异步action_Redux数据状态管理
Redux 中文文档(https://www.redux.org.cn/) Redux入门教程(快速上手)(https://segmentfault.com/a/1190000011474522?fr ...
[Redux/Mobx] 在Redux中怎么发起网络请求？
[Redux/Mobx] 在Redux中怎么发起网络请求? 如果单纯的使用Redux,因为redux的actionCreator返回一个plain object,所以不能在actionCreator中 ...
Redux概念之一: Redux简介
Redux的官网中用一句话来说明Redux是什么: Redux是针对JavaScript应用的可预测状态容器这句话虽然简短,其实是有几个涵义的: 可预测的(predictable): 因为Redux ...
[Redux/Mobx] 说说Redux的实现流程
[Redux/Mobx] 说说Redux的实现流程通过分析redux的几个核心api,来看如何实现redux store.subscribe: 订阅数据的变化 store.dispatch:disp ...
[Redux/Mobx] 在redux中，什么是action？
[Redux/Mobx] 在redux中,什么是action? action是Redux中定义一个响应的动作,action总是有一个type属性,作为这个动作的唯一标识; Reducer函数则会根据这 ...
[Redux/Mobx] 为什么redux能做到局部渲染呢？
[Redux/Mobx] 为什么redux能做到局部渲染呢? reducer从根往最子级的reducer中间各层总是返回一个新的state,这样的话,就会引起组件的大范围的re-render,但是这是 ...

redux异步之redux-thunk

简介

使用

下载

配置

组件中的使用

redux异步之redux-thunk相关推荐

最新文章

热门文章