redux异步之redux-thunk
异步 redux
2023-09-11 14:19:18 时间
简介
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.props
return (
<div>
...
<button onClick={getAsyncData}>异步递增</button>
</div>
)
}
}
const mapDispatchToProps = (dispatch)=>{
return{
getAsyncData(){
dispatch(asyncGetData(1))
}
}
}
点击按钮过一段时间之后,我们就会发现相应的数据也会进行改变
相关文章
- AjaxPro实现异步调用,解决浏览器假死及超时问题
- 关于异步FIFO设计,这7点你必须要搞清楚
- FPGA同步复位、异步复位、异步复位同步释放
- 【学习笔记33】JavaScript延时器定时器和异步程序
- 为什么 setState 是异步的?原理是?
- 基于FPGA的RS232异步串行口IP核设计
- aiohttp 异步http请求-12.aiohttp 请求生命周期(和requests库有什么不一样?)
- MVC验证11-对复杂类型使用jQuery异步验证
- 实践基于Task的异步模式
- 异步编程的本质:后继处理流程的保存
- 使用QFuture类监控异步计算的结果
- vue中异步组件实现按需加载
- 【校招Verilog手撕代码】VL7、异步复位同步释放
- koa2 使用 async 、await、promise解决异步的问题
- VHDL——含异步清零的4状态同步有限状态机