首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React---Redux异步action

React---Redux异步action

作者头像
半指温柔乐
发布2021-05-06 16:50:50
8050
发布2021-05-06 16:50:50
举报
文章被收录于专栏:前端知识分享前端知识分享

一、分析

   (1).明确:延迟的动作不想交给组件自身,想交给action

(2).何时需要异步action:想要对状态进行操作,但是具体的数据靠异步任务返回。

(3).具体编码:

1).npm add redux-thunk,并配置在store中

2).创建action的函数不再返回一般对象,而是一个函数,该函数中写异步任务。

3).异步任务有结果后,分发一个同步的action去真正操作数据。

(4).备注:异步action不是必须要写的,完全可以自己等待异步任务的结果了再去分发同步action。

二、代码

1. store.js

 1 /* 
 2     该文件专门用于暴露一个store对象,整个应用只有一个store对象
 3 */
 4 
 5 //引入createStore,专门用于创建redux中最为核心的store对象
 6 import {createStore,applyMiddleware} from 'redux'
 7 //引入为Count组件服务的reducer
 8 import countReducer from './count_reducer'
 9 //引入redux-thunk,用于支持异步action
10 import thunk from 'redux-thunk'
11 //暴露store
12 export default createStore(countReducer,applyMiddleware(thunk))

2. count_action.js

 1 /* 
 2     该文件专门为Count组件生成action对象
 3 */
 4 import {INCREMENT,DECREMENT} from './constant'
 5 
 6 //同步action,就是指action的值为Object类型的一般对象
 7 export const createIncrementAction = data => ({type:INCREMENT,data})
 8 export const createDecrementAction = data => ({type:DECREMENT,data})
 9 
10 //异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的。
11 export const createIncrementAsyncAction = (data,time) => {
12     return (dispatch)=>{
13         setTimeout(()=>{
14             dispatch(createIncrementAction(data))
15         },time)
16     }
17 }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-04-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、分析
  • 二、代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档