The difference between thunk and saga in react middleware: 1. [redux-thunk] only supports original objects [(plain object)] and handles actions with side effects; 2. [redux-saga] handles all For asynchronous operations, the asynchronous interface part is clear at a glance.
The operating environment of this tutorial: windows7 system, React17 version. This method is suitable for all brands of computers.
Related learning recommendations: react video tutorial
##The difference between thunk and saga in react middleware:
1. The use and shortcomings of redux-thunk
(1)The use of redux-thunkthunk is the middleware given by the author of redux. It is extremely simple to implement, with more than 10 Lines of code: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(dispatch, getState, extraArgument);
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__() ) );
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 }) ) }
2. Use of redux-saga
In redux-saga, action is plain object( original object), and centrally handles all asynchronous operations. Let’s take the official example of redux-sagashopping-cart as an example to talk about the use of redux-saga.
shopping-cartThe example is very simple, showing the following process:
getAllProducts() and
checkout() represent that if thunk is used, then these two asynchronous operations belong to two different actions, but in saga, they are processed centrally.
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) }
getAllProducts()and
checkout()
export const GET_ALL_PRODUCTS = 'GET_ALL_PRODUCTS' export function getAllProducts() { return { type: GET_ALL_PRODUCTS, } }
Advantages:(1)All asynchronous operations are processed centrally, and the asynchronous interface part is clear at a glance(2)Action is an ordinary object, which is exactly the same as the redux synchronized action
(3) Through Effect, it is convenient to test asynchronous interfaces(4) Non-blocking asynchronous calls can be realized through workers and watchers, and event monitoring under non-blocking calls can also be realized at the same time(5) The process of asynchronous operations can be controlled, and the corresponding asynchronous operations can be canceled at any time.Disadvantages: too complicated, high learning cost
Related learning Recommended: javascript learning tutorial
The above is the detailed content of What is the difference between thunk and saga in react middleware?. For more information, please follow other related articles on the PHP Chinese website!