一、什么是异步action
通俗的说,同步action:返回一个对象;异步action:返回一个函数
二、什么时候使用异步action
1. 同步数据流过程:
![同步数据流过程](https://i-blog.csdnimg.cn/blog_migrate/bb7b31e0055a6712f88fa462bb3a844e.gif)
2. 异步数据流过程:
![异步数据流过程](https://i-blog.csdnimg.cn/blog_migrate/9ea57481cff19516d8e29f3823b4f5dc.gif)
根据同步和异步数据流过程对比,我们可以看出,可以将AJAX 请求等逻辑放在异步action中。由于Redux 存储对异步逻辑一无所知,它只知道如何同步调度操作,通过调用reducer函数更新状态,并通知 UI 某些内容已更改。任何异步性都必须发生在store之外。如果需要进行异步操作,那么就需要借助Redux 中间件。
三、常用的两种中间件
1. redux-thunk
安装
npm i redux-thunk
例子:
action中
//redux-thunk
function getInfo(){
return (dispatch)=>{
axios({
url:"https://xxxxx",
method:"xxx",
.......
}
}).then(res=>{
dispatch({
type:"xxx",
payload:res.data.xxx
})
})
}
}
注意:由于此时是异步action,函数getInfo中不再返回一个普通的对象,而是一个函数,该函数接收到一个dispatch参数
store中:
import {applyMiddleware, combineReducers, createStore} from 'redux'
import reduxThunk from 'redux-thunk'
const reducer = combineReducers({
AReducer,
BReducer,
CReducer
})
const store = createStore(reducer,applyMiddleware(reduxThunk));
从redux中引用applyMiddleware函数,将reduxThunk作为该函数的参数,并且最终作为createStore函数中的第二个参数
2. redux-promise
安装
npm i redux-promise
例子:
action中:
//redux-promise
function getInfo(){
return axios({
axios({
url:"https://xxxxx",
method:"xxx",
.......
}
}).then(res=>{
return {
type:"xxx",
payload:res.data.xxx
}
})
}
注意:此时函数getInfo返回的是一个Promise,需要通过
getInfo().then(res=>{
//获取返回的数据
})
store中:
import {applyMiddleware, combineReducers, createStore} from 'redux'
import reduxPromise from 'redux-promise'
const reducer = combineReducers({
AReducer,
BReducer,
CReducer
})
const store = createStore(reducer,applyMiddleware(reduxPromise));
3. redux-thunk和redux-promise可以同时使用
store中
import {applyMiddleware, combineReducers, createStore} from 'redux'
import reduxThunk from 'redux-thunk'
import reduxPromise from 'redux-promise'
const reducer = combineReducers({
AReducer,
BReducer,
CReducer
})
const store = createStore(reducer,applyMiddleware(reduxThunk, reduxPromise));