redux中异步action的两种创建方式

redux中action的分类分为两种，分别是同步action和异步action。

• 同步action：创建的action值为Object类型的一般对象
• 异步action：创建的action返回值为函数，在函数中去执行异步任务，等到异步任务有结果后再去分发同步任务。

异步action 的两种实现方式

1. 使用redux结合redux-thunk实现异步action
   （1） 下载redux和redux-thunk库。
   npm i redux redux-thunk -S
   （2） 在store.js中创建store。store在dispatch分发action时，只返回的识别一般对象的action。如果要实现返回值一个函数，需要引入一个redux-thunk中间件辅助执行，它允许创建action函数返回可能包含异步任务的函数

// store.js
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer

export default createStore(reducer, applyMiddleware(thunk)

（3） 实现异步action

当action创建函数返回值是函数时，这个函数会被redux-thunk中间件执行，这个函数并不需要保持纯净，它还可以带有副作用，包括执行异步API请求，在异步函数里面还可以分发同步action

// action.js
// 同步action
export createAction = (data) => ({type: 'ADD', data})
// 同步action
export createAsyncAction = (data, delay) => {
	return (dispatch) => {
		setTimeout(() => {
			// 调用异步action
			dispatch(createAction(data)
		}, delay)
	}
}

3. 使用@reduxjs/toolkit实现异步action

   1. 下载@reduxjs/toolkit库。
      npm i @reduxjs/toolkit -S
   2. 使用configureStore创建store。
      @redux/toolkit的configureStore功能默认自动设置了thunk中间件，它会允许将thunk函数值直接传递给store.dispatch

   import { configureStore } from '@reduxjs/toolkit '
   import reducer from 'reducer'
   export default configureStore({reducer})
   

   3. 实现异步action

   // action.js
   // 同步action
   export createAction = (data) => ({type: 'ADD', data})
   // 同步action
   export createAsyncAction = (data, delay) => {
   	return (dispatch) => {
   		setTimeout(() => {
   			// 调用异步action
   			dispatch(createAction(data)
   		}, delay)
   	}
   }