React---Redux异步action

2021年09月15日 阅读数:5
这篇文章主要向大家介绍React---Redux异步action,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、分析

    (1).明确:延迟的动做不想交给组件自身,想交给action
         (2).什么时候须要异步action:想要对状态进行操做,可是具体的数据靠异步任务返回。
         (3).具体编码:
                    1). npm add redux-thunk,并配置在store中
                    2).建立action的函数再也不返回通常对象,而是一个函数,该函数中写异步任务。
                    3).异步任务有结果后,分发一个同步的action去真正操做数据。
         (4).备注:异步action不是必需要写的,彻底能够本身等待异步任务的结果了再去分发同步action。

2、代码

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.jsnpm

 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 }

 

本文同步分享在 博客“半指温柔乐”(CNBlog)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。redux