异步action需要安装redux-thunk
tnpm i redux-thunk
—— store.ts文件
/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/
// 引入createStore，专门用于创建redux中最为核心的store对象
import { createStore, applyMiddleware } from 'redux'
// 引入为Count组件服务的reducer
import CountReducer from './count_reducer'
// 引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
// 暴露store
export default createStore(CountReducer, applyMiddleware(thunk))
—— count_action.ts
// 异步action：action的值为函数;
// 异步action中一般都会调用同步action，异步action不是必须要调用的
export const createIncrementAsyncAction = (data: number, time:number) => {
return () => {
setTimeout(() => {
// store.dispatch({type: INCREMENT, data})
// 两种方法都可以，最好选择下面的写法
store.dispatch(createIncrementAction(data))
}, time)
}
}
—— 总结 【Redux|Redux异步action】
文章图片
推荐阅读
- redux|redux action ajax,Redux介绍之异步Action
- React|React UI组件库——如何快速实现antd的按需引入和自定义主题
- React|【React路由】编程式路由导航和withRouter的使用——push / replace
- React|React路由组件传参的三种方式——params、search、state
- React|【React组件】github搜索案例之 父子组件通信 (附源码)
- React|【React】React组件实例的三大属性之state，props，refs（你学废了吗）
- React|【ReactRouter5】路由的模糊匹配，重定向以及嵌套路由
- React|【React】深入理解React组件生命周期----图文详解（含代码）
- react的useState的用法