ホームページ > 記事 > ウェブフロントエンド > Reactミドルウェアのサンクとサーガの違いは何ですか?

Reactミドルウェアのサンクとサーガの違いは何ですか?

coldplay.xixiオリジナル: 2020-12-17 11:32:163561ブラウズ

反応ミドルウェアにおけるサンクとサガの違い: 1. [redux-thunk] はオリジナルのオブジェクト [(プレーンオブジェクト)] のみをサポートし、副作用のあるアクションを処理します; 2. [redux-saga] はすべての For を処理します非同期操作の場合、非同期インターフェイス部分は一目瞭然です。

このチュートリアルの動作環境: Windows7 システム、React17 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

関連する学習の推奨事項: react ビデオチュートリアル

##React ミドルウェアのサンクとサーガの違い:

1. redux-thunkの使い方と欠点

(1)redux-thunk

thunkの使い方はreduxの作者が提供したミドルウェアです。実装は簡単で、10 行以上のコード:

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === &#39;function&#39;) {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

これらのコード行の内容も非常に簡単です。アクションの種類を決定します。アクションが関数の場合は、この関数を呼び出します。呼び出し手順

action(dispatch, getState, extraArgument);

実際のパラメータはdispatchとgetStateなので、アクションをサンク関数として定義すると、一般的なパラメータはdispatchとgetStateになります。

(2) の欠点redux-thunk

thunk の欠点も明らかですはい、thunk はこの関数を実行するだけで、関数の本体の内容は気にしません。言い換えれば、thunk は redux が関数をアクションとして受け入れることを可能にしますが、関数の内部は多様にすることができます。たとえば、次は製品リストを取得するための非同期操作です。対応するアクション

storeは最初にミドルウェア

import { createStore, applyMiddleware, compose } from &#39;redux&#39;;
import thunk from &#39;redux-thunk&#39;;
import rootReducer from &#39;./reducers/index&#39;;
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 &#39;./type&#39;
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
    })
    )
}

このアクションと副作用から、関数の内部が非常に複雑であることがわかります。すべての非同期操作に対してこのようなアクションを定義する必要がある場合、明らかにアクションの保守は簡単ではありません。

アクションの保守が容易でない理由:

I)アクションの形式が統一されていない

II)非同期操作がさまざまなアクションに分散しすぎているため

2. redux-saga の使用#redux-saga では、アクションはプレーンオブジェクト (元のオブジェクト) であり、すべての非同期操作を集中的に処理します。 redux-saga の使用について説明する例として、saga

shopping-cart

を使用します。

shopping-cart

この例は非常に単純で、次のプロセスを示しています:商品リスト --> 商品の追加 --> ショッピングカート --> お支払い

詳細ページは次のとおりです:

明らかに、2 つの明らかな非同期があります。実行する必要がある操作:

製品リストを取得して支払いを行う

Use

getAllProducts()

および checkout() は、次の場合を表します。 thunk が使用されている場合、これら 2 つの非同期操作は 2 つの異なるアクションに属しますが、saga では集中的に処理されます。saga を使用して、最初に非同期処理に焦点を当てた saga.JS ファイルを生成します。

import { put, takeEvery, call } from &#39;redux-saga/effects&#39;
import { CHANGE_HITOKOTO_RESP, CHANGE_HITOKOTO } from &#39;../actions/Hitokoto&#39;
import hitokotoApi from &#39;../services/hitokoto&#39;
function gethitokoto() {
    return hitokotoApi.get().then(resp => resp)
}
export function* changeHitokoto() {
    const defaultHitokoto = {
        &#39;id&#39;: 234,
        &#39;hitokoto&#39;: &#39;没有谁能够永远坚强下去的, 每个人都会有疲累的无法站起的时候. 世间的故事, 就是为了这一刻而存在的哦.&#39;,
        &#39;type&#39;: &#39;a&#39;,
        &#39;from&#39;: &#39;文学少女&#39;,
        &#39;creator&#39;: &#39;酱七&#39;,
        &#39;created_at&#39;: &#39;1468605914&#39;
    };
    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() にこの 2 つが集中していることがわかります。 さらに、サガのアクションは元のオブジェクトとまったく同じです。サガのアクションクリエーターを見てみましょう :

export const GET_ALL_PRODUCTS = &#39;GET_ALL_PRODUCTS&#39;
export function getAllProducts() {
  return {
    type: GET_ALL_PRODUCTS,
  }
}

上記のアクションクリエーターで、作成されるアクションは次のとおりです。 redux で使用する同期アクションのスタイルと一致するプレーンオブジェクト。

redux-saga の利点と欠点

利点:

(1)すべて非同期操作は集中処理され、非同期インターフェイス部分は一目瞭然です。

(2)Action は通常のオブジェクトであり、redux 同期アクションとまったく同じです

(3)結果、非同期インターフェイスのテストに便利です

(4) ワーカーとウォッチャーを通じてノンブロッキング非同期呼び出しを実現でき、同時にノンブロッキング呼び出しでのイベント監視も実現できます

(5) 非同期操作のプロセスを制御でき、対応する非同期操作をいつでもキャンセルできます。

欠点: 複雑すぎて学習コストが高くなります

Reactミドルウェアのサンクとサーガの違いは何ですか?

関連記事