Was ist der Unterschied zwischen Thunk und Saga in der React-Middleware?

Der Unterschied zwischen Thunk und Saga in der Reaktions-Middleware: 1. [redux-thunk] unterstützt nur Originalobjekte [(einfaches Objekt)] und verarbeitet Aktionen mit Nebenwirkungen; 2. [redux-saga] verarbeitet alle asynchronen Vorgänge Der Schnittstellenteil ist selbsterklärend.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React17-Version. Diese Methode ist für alle Computermarken geeignet.

Verwandte Lernempfehlungen: React-Video-Tutorial

Der Unterschied zwischen Thunk und Saga in der React-Middleware:

1. Die Verwendung und Nachteile von Redux-Thunk

(1) Die Verwendung von Redux- thunk

thunk ist die vom Autor von Redux bereitgestellte Middleware. Sie erfordert mehr als 10 Codezeilen:

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;

Was diese Codezeilen bewirken, ist auch sehr einfach . Wenn die Aktion eine Funktion ist, rufen Sie diese Funktion auf. Die Schritte sind:

action(dispatch, getState, extraArgument);

Wir haben festgestellt, dass die tatsächlichen Parameter „dispatch“ und „getState“ sind. Wenn wir die Aktion also als Thunk-Funktion definieren, sind die allgemeinen formalen Parameter „dispatch“ und „getState“.

(2) Die Mängel von redux-thunk

thunk liegen ebenfalls auf der Hand. Ja, Thunk führt nur diese Funktion aus und kümmert sich nicht darum, was sich im Funktionskörper befindet. Mit anderen Worten: Thunk ermöglicht es Redux, Funktionen als Aktionen zu akzeptieren. Das Innere der Funktion kann jedoch unterschiedlich sein. Im Folgenden finden Sie beispielsweise eine asynchrone Operation zum Abrufen einer Produktliste. Die entsprechende Aktion führt zunächst die Middleware in der Aktionsdatei ein Wir können sehen, dass die Funktion im Inneren äußerst komplex ist. Wenn Sie für jede asynchrone Operation eine Aktion wie diese definieren müssen, ist die Wartung der Aktion offensichtlich nicht einfach:

I) Die Form der Aktion ist nicht einheitlich

II) Es liegt daran, dass asynchrone Operationen zu verstreut und in verschiedenen Aktionen verstreut sind

2 Verwendung von Redux-Saga

In Redux-Saga ist Aktion ein einfaches Objekt (Originalobjekt). , und alle asynchronen Vorgänge werden zentral verarbeitet. Nehmen wir das offizielle Beispiel von redux-saga shopping-cart. Sprechen wir über die Verwendung von redux-saga

shopping-cart Das Beispiel ist sehr einfach und zeigt den folgenden Prozess:

Produktliste-->Produkt hinzufügen-->Warenkorb--> Zahlung

Die spezifische Seite sieht wie folgt aus:

Offensichtlich da Es gibt zwei offensichtliche asynchrone Vorgänge, die hier ausgeführt werden müssen:

shopping-cart为例, 来说说 redux-saga 的使用.

shopping-cart例子很简单, 展示的是如下过程:

商品列表 -->添加商品 -->购物车 -->付款

具体的页面, 如下:

显然, 这里有两个明显的异步操作需要执行:

获取商品列表和付款

用 getAllProducts()和 checkout()来表示, 如果用 thunk, 那么这两个异步的操作分属于两个不同的 action 中, 但是在 saga 中, 它们是集中处理的.

使用 saga, 我们先生成一个集中处理异步的 saga.JS 文件:

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__()
)
);

抛去其他部分 (具体用法我们待会解释), 我们看到在 saga.JS 中集中了这两个异步操作getAllProducts()和checkout()Produktliste abrufen und Zahlung durchführen

Verwenden Sie getAllProducts() und checkout( ), um auszudrücken, ob Thunk vorliegt verwendet wird, gehören diese beiden asynchronen Vorgänge zu zwei verschiedenen Aktionen, aber in Saga werden sie zentral verarbeitet Die Verwendung wird später erläutert), wir sehen, dass diese beiden asynchronen Operationen getAllProducts() und checkout()

Außerdem ist die Aktion in der Saga genau die gleiche wie Schauen wir uns den Aktionsersteller in der Saga an: redux-saga

Vorteile:

(1) Alle asynchronen Vorgänge werden zentral verarbeitet und der asynchrone Schnittstellenteil ist auf einen Blick klar

(2)action Es handelt sich um ein gewöhnliches Objekt, das genau mit der Redux-Synchronisation identisch ist Aktion.

(3) Durch Effect ist es bequem, die asynchrone Schnittstelle zu testen

(4) Durch Worker und Watcher können nicht blockierende asynchrone Aufrufe realisiert werden, und Ereignisse unter nicht blockierenden Aufrufen können realisiert werden Gleichzeitig. Überwachung

(5) Der Prozess asynchroner Vorgänge kann gesteuert werden und die entsprechenden asynchronen Vorgänge können jederzeit abgebrochen werden.

Nachteile: Zu kompliziert, hohe Lernkosten

Verwandte Lernempfehlungen:

Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Thunk und Saga in der React-Middleware?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!