反応-リドス中間部品編

8169 ワード

リドスミドルウェア


冗長性は、次のプロセスによって管理され、操作されます.

では、まず、Ridexミドルウェアがどのように動作しているかを図から理解しましょう.

なぜリドスミッドの服装が必要なのですか?🤔


動作が発生すると、既存の冗長性は、ステータスの変更が必要であることを通知するために派遣されます.ただし、既に派遣されたアクションをショップに転送する前に、処理したいタスクがいくつかあるかもしれません.たとえば、どのようなアクションが発生したかだけを記録したり、そのアクションをキャンセルしたり、別のアクションをトリガーしたりすることができます.
我々が知っている電磁誘導は同期流によって動作する.アクションオブジェクトが作成され、ディスパッチプログラムがアクションの発生をショップに通知すると、リダイレクトプログラムは指定した論理に基づいてアクションを処理し、新しいステータス値を返します.しかし、同期ストリームだけでは達成しにくいタスクもあります.画面に対応する応答を表示するために、時間を遅らせたり、外部データを要求したりする必要がある場合は、どうすればいいですか?
これらの非同期タスクの処理には指示がないため、これらの非同期タスクの処理には通常冗長ミドルウェアが使用されます.
代表的なRidexミドルウェア
  • redux-logger:どのような動作が発生したかを記録するためのミドルウェア
  • rudux-thunk,redux-saga:非同期タスクを処理するためのミドルウェア
  • ✔ redux-logger


    redux-loggerは、アプリケーション内の動作情報をコンソールに出力するミドルウェアです.
    まずredusミドルウェアの動作を考えてみましょう.派遣された動作をショップに送信する前に、ミドルウェアは必要な操作を処理し、その後、動作をショップに送信します.Redux-Loggerミドルウェアは、派遣されたアクションがどのようなアクションなのかを理解し、コンソールにログを残してショップに送信するのに役立ちます.

    ✔redux-thunk、そしてthunk


    redux-thunkは、リドスミドルウェアの中で非同期タスクを処理するためのミドルウェアであり、非同期タスクを処理するミドルウェアの中で最も代表的なリドスミドルウェアである.
    thunkの定義では、「thunkは主に計算結果が必要になるまで遅延計算に使用されます.」
    では、計算結果をどのように遅らせるのでしょうか.たとえば、1+2を出力したい場合は、次のコードを記述できます.
    console.log(1 + 2);
    ただし、計算結果が必要になるまで演算を遅延させたい場合は、次のようにコードを囲み、必要に応じて関数を呼び出すだけです.
    const foo = () => {
      console.log(1+2);
    }
    ではredux-thunkはどのようにthunkの概念を応用しますか?
    既知の既存の関係では、アクション作成関数は、アクションをオブジェクト形状に戻す関数です.ただし、リドスヤンクを使用すると、アクション作成関数は非オブジェクトの関数を返すことができます.すなわち、スケールの形式として非オブジェクト関数を返し、必要に応じて関数を呼び出すことができます.

    ✔ redux-saga


    redux-sagaでは、アクションを監視し、アクションが発生したときにそのアクションを実行できます.ここで、特定のアクションは、特定のJavaScriptを実行することであってもよいし、他のアクションを派遣することであってもよいし、現在のステータスをロードすることであってもよい.redux-sagaは、redux-thunkでは達成できない様々なタスクを処理することもできます.
  • 非同期操作を行う場合、既存の要求の処理をキャンセルすることができる.
  • 特定の動作が発生した場合、それに応じて他の動作を派遣してもよいし、JavaScriptコードを実行してもよい.
  • Webスロットを使用する場合、Channelという機能を使用してコードをより効率的に管理できます.
  • APIリクエストが失敗した場合、これらのリクエストを再利用できます.
  • Generator構文
    この構文の核心機能は、関数を作成するときに、関数を特定の領域にドッキングしたり、必要に応じて返したりすることです.結果値を複数回返すこともできます.
    たとえば、次の関数があるとします.
    function weirdFunction() {
      return 1;
      return 2;
      return 3;
      return 4;
      return 5;
    }
    実際には、関数が複数回値を返すことはできません.この関数が呼び出されるたびに、1が返されます.
    ただし、ジェネレータ関数を使用して、関数の値を順番に返すことができます.関数のストリームを途中で停止して続行することもできます.
    ジェネレータ関数の作成には、キーワードfunction*を使用します.
    ジェネレータ(Generator)関数を呼び出すと、ジェネレータ(Generator)と呼ばれるオブジェクトが返されます.
    関数を作成したら、次のコードを使用してウィジェットを作成します.
    function* generatorFunction() {
        console.log('안녕하세요?');
        yield 1;
        console.log('제너레이터 함수');
        yield 2;
        console.log('function*');
        yield 3;
        return 4;
    }
    const generator = generatorFunction();
    
    1つ以上のマネージャ関数を呼び出すと、すぐにその関数のコードが起動しません.generator.next()を呼び出すと、コードが実行され、生成値が返され、コードストリームが停止します.
    コードストリームが停止するとジェネレータが生成されます.next()が再び呼び出されると、ストリームは再起動されます.
    別のJenniter関数の例を見てみましょうか?また、nextを呼び出すときにパラメータを渡して、マネージャ関数で使用することもできます.
    function* sumGenerator() {
        console.log('sumGenerator이 시작됐습니다.');
        let a = yield;
        console.log('a값을 받았습니다.');
        let b = yield;
        console.log('b값을 받았습니다.');
        yield a + b;
    }