0


【Redux】异步action与同步action

在这里插入图片描述

** 欢迎来到我的博客**
**📔博主是一名大学在读本科生,主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥

      R
     
     
      e
     
     
      a
     
     
      c
     
     
      t
     
     
      框架
     
    
    
     React框架
    
   
  React框架🔥,中间穿插了一些基础知识的回顾

🌈博客主页👉codeMak1r.的博客**

😇本文被专栏【React–从基础到实战】收录

🕹坚持创作✏️,一起学习📖,码出未来👨🏻‍💻!
在这里插入图片描述
前面我们详细介绍了redux的工作流程,本文中我们将探索异步action。
【Redux的工作流程(附案例、源码)】

异步action

action:Object{} => 同步action

action:function() => 异步action
同步action异步action类型Object类型的对象function()函数dispatch(action)同步的action被dispatch到store后;
store直接将其交给reducer加工。异步的action函数被dispatch到store后;
store会先调用这个函数,等待异步任务结束。
在这里插入图片描述

store监测到传入的action是一个一般对象,那么store就知道这是一个同步的action,store就会把这个action交给Reducers去加工,执行。

但是store若监测到传入的action是一个函数,那么store就知道这是一个异步的action,store就会配合中间件,先调用这个函数。等到函数内的异步任务结束,再调用函数内部的同步的dispatch,再交给Reducers去加工状态。同时,store调用这个包裹着异步任务的函数时,会传入一个dispatch方法作为函数的参数,以供函数内部异步任务结束时使用这个同步的dispatch。

中间件(Middleware):redux-thunk

安装中间件:

npm install redux-thunk
// 或
yarn add redux-thunk

引入中间件:

既然中间件是配合store使用的,那么当然是在store中引入并使用这个中间件

store.js:

/* 
  该文件专门用于暴露一个store对象,整个应用只有一个store对象
*/// 引入createStore,专门用于创建redux中最为核心的store对象import{ legacy_createStore as createStore, applyMiddleware }from'redux';// 引入为Count组件服务的reducerimport countReducer from'./count_reducer'// 引入redux-thunk,用于支持异步actionimport thunk from'redux-thunk'// 暴露storeexportdefaultcreateStore(countReducer,applyMiddleware(thunk))

代码解释:

applyMiddleware是redux中用于执行中间件的函数;

引入redux-thunk中间件;

在creaetStore时,将applyMiddleware传入作为createStore的第二个参数;

applyMiddleware本身是一个函数,用于执行中间件,所以要把(thunk)传入applyMiddleware这个函数。

applyMiddleware(thunk)含义是:执行thunk这个中间件。

这样一来,store就会在接收到一个函数类型的action时,去调用这个action对应的函数。

并且,异步action中一般都会调用同步的action,所以store在调用这个异步action对应的函数时,会传入dispatch方法作为参数,以供异步任务结束后,使用这个dispatch方法调用同步的action。

count_action_creator.js:

/* 
  该文件专门为Count组件生成action动作对象
*/import{INCREMENT,DECREMENT}from'./constant'// 同步action,就是指action的值为Object对象exportconstcreateIncrementAction=data=>({type:INCREMENT, data })// ({ type: 'increment', data }) 相当于 { return { type: 'increment', data } }exportconstcreateDecrementAction=data=>({type:DECREMENT, data })// 异步action,就是指action的值是函数exportconstcreateIncrementAsyncAction=(data, time)=>{return(dispatch)=>{setTimeout(()=>{dispatch(createIncrementAction(data))}, time)}}

在Count组件中调用这个函数:

incrementAsync=()=>{const{ value }=this.selectedNumber
  store.dispatch(createIncrementAsyncAction(value *1,500))}

异步action总结:

  1. 延迟的动作不想交给组件自身,想交给action时,可以使用异步的action (但异步action并不是必须的);
  2. 何时需要异步action: 想对状态进行操作,但是具体的数据靠异步任务返回;
  3. 具体编码:npm install redux-thunk 或 yarn add redux-thunk安装中间件创建action的函数不再返回一个一般对象,而是返回一个函数,该函数中写异步任务;异步任务有结果后,使用store传入的dispatch参数分发一个同步的action去真正操作数据
  4. 备注:异步action不是必须要写的,完全可以自己在组件中等待异步任务的结果之后再去分发同步action。

本文转载自: https://blog.csdn.net/Svik_zy/article/details/125838979
版权归原作者 codeMak1r.小新 所有, 如有侵权,请联系我们删除。

“【Redux】异步action与同步action”的评论:

还没有评论