20 redux - 异步 Action

12/16/2021 react

求和案例_redux异步action版

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

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

(3).具体编码:
1).yarn add redux-thunk,并配置在store中
2).创建action的函数不再返回一般对象,而是一个函数,该函数中写异步任务。
3).异步任务有结果后,分发一个同步的action去真正操作数据。

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

redux\count_action.js

/* 
	该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'

//同步action,就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})

//异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(createIncrementAction(data))
		},time)
	}
}

redux\store.js

/* 
	该文件专门用于暴露一个store对象,整个应用只有一个store对象
*/

import { createStore, applyMiddleware } from "redux";
import countReducer from "./count_reducer";

//引入redux-thunk,用于支持异步action
import thunk from "redux-thunk";

//暴露store
export default createStore(countReducer, applyMiddleware(thunk));
更新时间: Friday, December 17, 2021 21:19