react中间件的thunk和saga区别：1、【redux-thunk】仅支持原始对象【(plain object)】，处理有副作用的action；2、【redux-saga】中处理了所有的异步操作, 异步接口部分一目了然。
本教程操作环境：windows7系统、react17版，该方法适用于所有品牌电脑。
相关学习推荐：react视频教程
react中间件的thunk和saga区别：
1、redux-thunk 的使用与缺点
(1)redux-thunk 的使用
thunk 是 redux 作者给出的中间件, 实现极为简单, 10 多行代码:
function createthunkmiddleware(extraargument) { return ({ dispatch, getstate }) => next => action => { if (typeof action === 'function') { return action(dispatch, getstate, extraargument); } return next(action); };}const thunk = createthunkmiddleware();thunk.withextraargument = createthunkmiddleware;export default thunk;
这几行代码做的事情也很简单, 判别 action 的类型, 如果 action 是函数, 就调用这个函数, 调用的步骤为:
action(dispatch, getstate, extraargument);
发现实参为 dispatch 和 getstate, 因此我们在定义 action 为 thunk 函数是, 一般形参为 dispatch 和 getstate.
(2)redux-thunk 的缺点
thunk 的缺点也是很明显的, thunk 仅仅做了执行这个函数, 并不在乎函数主体内是什么, 也就是说 thunk 使得 redux 可以接受函数作为 action, 但是函数的内部可以多种多样. 比如下面是一个获取商品列表的异步操作所对应的 action
store 里面先引入中间件
import { createstore, applymiddleware, compose } from 'redux';import thunk from 'redux-thunk';import rootreducer from './reducers/index';const initialstate = {};const middleware = [thunk];export const store = createstore(rootreducer,initialstate,compose(applymiddleware(...middleware),windows.__redux_devtools_extension__ && windows.__redux_devtools_extension__()));
action 文件里
import { fetch_posts, new_post } from './type'export const fetchposts = () => dispatch => {fetch("https://jsonplaceholder.typicode.com/posts") .then(res => res.json()) .then(posts => dispatch({ type: fetch_posts, payload: posts }) )}export const createpost = postdata => dispatch => {fetch("https://jsonplaceholder.typicode.com/posts",{ method: "post", headers:{ "content-type":"application/json" }, body:json.stringify(postdata) }) .then(res => res.json()) .then(post => dispatch({ type: new_post, payload: post }) )}
从这个具有副作用的 action 中, 我们可以看出, 函数内部极为复杂. 如果需要为每一个异步操作都如此定义一个 action, 显然 action 不易维护.
action 不易维护的原因:
i)action 的形式不统一
ii)就是异步操作太为分散, 分散在了各个 action 中
2、redux-saga 的使用
在 redux-saga 中, action 是 plain object(原始对象), 并且集中处理了所有的异步操作, 下面我们以 redux-saga 的官方例子 shopping-cart为例, 来说说 redux-saga 的使用.
shopping-cart例子很简单, 展示的是如下过程:
商品列表 -->添加商品 -->购物车 -->付款
具体的页面, 如下:
显然, 这里有两个明显的异步操作需要执行:
获取商品列表和付款
用 getallproducts()和 checkout()来表示, 如果用 thunk, 那么这两个异步的操作分属于两个不同的 action 中, 但是在 saga 中, 它们是集中处理的.
使用 saga, 我们先生成一个集中处理异步的 saga.js 文件:
import { put, takeevery, call } from 'redux-saga/effects'import { change_hitokoto_resp, change_hitokoto } from '../actions/hitokoto'import hitokotoapi from '../services/hitokoto'function gethitokoto() { return hitokotoapi.get().then(resp => resp)}export function* changehitokoto() { const defaulthitokoto = { 'id': 234, 'hitokoto': '没有谁能够永远坚强下去的, 每个人都会有疲累的无法站起的时候. 世间的故事, 就是为了这一刻而存在的哦.', 'type': 'a', 'from': '文学少女', 'creator': '酱七', 'created_at': '1468605914' }; try { const data = yield call(gethitokoto); const hitokotodata = json.parse(data); yield put({ type: change_hitokoto_resp, hitokotodata }); } catch (error) { yield put({ type: change_hitokoto_resp, hitokotodata: defaulthitokoto }); }}export default function* shici() { yield takeevery(change_hitokoto, changehitokoto)}
抛去其他部分 (具体用法我们待会解释), 我们看到在 saga.js 中集中了这两个异步操作getallproducts()和checkout()
此外, 在 saga 中的 action 跟原始对象是完全相同的, 我们来看 saga 中的 action creator :
export const get_all_products = 'get_all_products'export function getallproducts() { return { type: get_all_products, }}
上述的 action creator 中, 创建的 action 是一个 plain object, 跟我们在 redux 中同步 action 的样式是统一的.
redux-saga 的优缺点
优点:
(1)集中处理了所有的异步操作, 异步接口部分一目了然
(2)action 是普通对象, 这跟 redux 同步的 action 一模一样
(3)通过 effect, 方便异步接口的测试
(4)通过 worker 和 watcher 可以实现非阻塞异步调用, 并且同时可以实现非阻塞调用下的事件监听
(5) 异步操作的流程是可以控制的, 可以随时取消相应的异步操作.
缺点: 太复杂, 学习成本较高
相关学习推荐：javascript学习教程
以上就是react中间件的thunk和saga区别是什么的详细内容。