What is the difference between thunk and saga in react middleware?

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-thunk

thunk 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;

What these lines of code do is also very simple. Determine the type of action. If the action is a function, call this function. The calling steps are:

action(dispatch, getState, extraArgument);

Discover the actual The parameters are dispatch and getState, so when we define the action as a thunk function, the general parameters are dispatch and getState.

(2) The shortcomings of redux-thunk

The shortcomings of thunk are also obvious Yes, thunk only executes this function and does not care what is in the body of the function. In other words, thunk allows redux to accept functions as actions, but the inside of the function can be diverse. For example, the following is an asynchronous operation to obtain a product list. The corresponding action

store first introduces the middleware

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 file

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
    })
    )
}

From this action with side effects, we can see that the function is extremely complex inside. If you need to define an action like this for every asynchronous operation, obviously the action is not easy to maintain.

The reason why action is not easy to maintain:

I)The form of action is not uniform

II ) is that asynchronous operations are too scattered and scattered in various actions

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-saga

shopping-cart as an example to talk about the use of redux-saga.

shopping-cartThe example is very simple, showing the following process:

Product list-->Add product-->Shopping cart-->Payment

Details The page is as follows:

Obviously, there are two obvious asynchronous operations that need to be performed:

Get the product list and make the payment

Use

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.

Using saga, we first generate a saga.JS file that focuses on asynchronous processing:

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)
}

Throw away other parts (the specific usage will be explained later), we see that these two are concentrated in saga.JS Asynchronous operations

getAllProducts()andcheckout()

In addition, the action in the saga is exactly the same as the original object. Let’s look at the action creator in the saga :

export const GET_ALL_PRODUCTS = 'GET_ALL_PRODUCTS'
export function getAllProducts() {
  return {
    type: GET_ALL_PRODUCTS,
  }
}

In the above action creator, the action created is a plain object, which is consistent with the style of synchronizing actions we use in redux.

Advantages and disadvantages of redux-saga

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!