redux-saga和redux-thunk的区别与使用场景?
redux-thunk
实现思路
redux-thunk相当于是基于store的升级,一般情况,我们传给store的action是一个对象,但是通过redux-thunk中间件,我们可以把部分的业务逻辑(异步请求)等放在action中进行处理。当store接收到函数类型的action,redux-thunk会执行该函数,并传入参数dispatch,当函数内部的逻辑执行完成后,会再次派发一个action继续向下执行。
// store中的index.js文件
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reduer from "./reduer";
// 使用react-devtools的配置
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(thunk)
);
const store = createStore(reduer, enhancer);
export default store;
// store中的action文件
......
// 保存list数据的action
export const getListData = (data) => {
return {
type: GET_LIST_DATA,
data
}
}
// 异步通过接口获取list数据的action
export const getListDataAction = () => {
// 默认store只能识别对象的action,但是使用了thunk,可以通过传入一个函数,在thunk中间件中会执行
return (dispatch) => {
axios.get("api/todolist").then(res => {
const action = getListData(res.data);
dispatch(action);
}).catch((e) => {
console.log("获取数据失败了", e)
})
}
}
redux-saga
实现思路
在store的index文件中创建saga中间件连接到store,saga中间件可以监控派发的action,如果有action.type值与监控的变量一致,则执行该函数的内容,在这个函数中也可以再次派发一个新的action。
// store中的index.js文件
import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga'
import reduer from "./reduer";
import mySaga from './sagas'
// 创建saga中间件
const sagaMiddleware = createSagaMiddleware();
// react-devtools的配置
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(sagaMiddleware)
);
const store = createStore(reduer, enhancer);
// 执行saga中间件
sagaMiddleware.run(mySaga)
export default store;
// sagas.js 文件
import { put, takeEvery } from "redux-saga/effects";
import { GET_LIST } from "./actiontypes";
import { getListDataAction } from "./renderStore"
import axios from "axios";
// 获取数据的函数
function* getListData() {
try {
// 使用异步的方式,拿到请求的结果
const res = yield axios.get("api/todolist");
// 获取到新的action
const action = getListDataAction(res.data);
// 派发新的action
yield put (action)
} catch (error) {
console.log("请求todolist数据失败了", error);
}
}
// 监控派发内容是 GET_LIST,都要执行一次 getListData函数
function* mySaga() {
yield takeEvery(GET_LIST, getListData);
}
export default mySaga;
使用场景
两者都是在发送后端请求需要使用异步代码的时候使用
区别
redux-thunk:通过执行action中的函数实现业务逻辑,没有拓展API
redux-saga:通过定义saga函数进行监控,同时提供一些常用的API
redux-thunk将部分异步处理业务逻辑写在action中,redux-sagasaga则是放在监控的函数中。