Redux-Sagaを使用しジェネレーター関数内でyieldをつけているのにどうしても非同期で動作してします。

Question

なぜかはじめに
FINISH0 が表示され
３秒後に
FINISH1が表示されてしまします
yieldをつけているのに、なぜか非同期で動いてしまっているのです。
どなた様かご教授ください。よろしくお願いします。

import {
  delay,
  takeEvery,
  takeLatest,
} from '@redux-saga/core/dist/redux-saga-effects.esm.js';

function* test0(action) {
  yield put({ type: 'TEST1' });
  console.log('FINISH0');
}

function* test1(action) {
  yield delay(3000);
  console.log('FINISH1');
}

export default [
  takeEvery('TEST1', test1),
  takeLatest('TEST0', test0),
];

Comments

[退会済みユーザー]

まだ回答がついていないようでしたのでコメントしてみます。
想定する結果が質問内容からではちょっと理解することができませんでした。
次の内容は参考になりますでしょうか。

> Sagas are implemented as Generator functions that yield objects to the redux-saga middleware. The yielded objects are a kind of instruction to be interpreted by the middleware. When a Promise is yielded to the middleware, the middleware will suspend the Saga until the Promise completes. In the above example, the incrementAsync Saga is suspended until the Promise returned by delay resolves, which will happen after 1 second.
> SagasはGenerator関数として実装され、redux-sagaミドルウェアにオブジェクトを引き渡す。生成されたオブジェクトはミドルウェアが解釈する一種の命令です。Promiseがミドルウェアに渡されると、ミドルウェアはPromiseが完了するまでSagaを停止させます。上記の例では、delayが返すPromiseが解決するまでincrementAsync Sagaは中断されます（1秒後）。
> https://redux-saga.js.org/docs/introduction/BeginnerTutorial/

---

> yield 式によって実行が停止されると、ジェネレーターの next() メソッドが呼び出されるまで、ジェネレーターのコード実行は一時停止します。ジェネレーターの next() メソッドが呼ばれるたびに、ジェネレーターの実行が再開され、次のうちのいずれかに達するまで実行されます。
> https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/yield

[iBETA]

自分なりに勝手な判断で理解しました。
なのですが上の文章を読み、またこんがらがってます。
でもジェネレーター関数の中でジェネレーター関数をyieldしない限り
いまのところちゃんと動いてはいるのでまあいいのかなと。。。
返事していただいてありがとうございました！！
yield 難しいです！！await のほうが理解できますね。

[退会済みユーザー]

コメントありがとうございます。
解決したようで良かったです。

私自身、yieldはあまり使わないので詳しくはないのですが、
直接的には非同期(async/await)などとは関係ないと思っています。

yieldすると、次にnextを呼び出されるまでyieldの行で止まっている感じでしょうか。
ですので、質問欄にあるようにyieldの下にログがあると、最初の1回目のログは出力されないことになると思います。

```js

function* generator1(index) {
while (index < 10) {
yield index++
console.log(`generator1.index : ${index}`)
}
}
const iterator = generator1(0)
let result = 0
console.log(`iterator.next 1回目前: ${result}`)
result = iterator.next().value
console.log(`iterator.next 1回目後: ${result}`)
result = iterator.next().value
console.log(`iterator.next 2回目後: ${result}`)
result = iterator.next().value
console.log(`iterator.next 3回目後: ${result}`)

// iterator.next 1回目前: 0
// iterator.next 1回目後: 0
// generator1.index : 1
// iterator.next 2回目後: 1
// generator1.index : 2
// iterator.next 3回目後: 2
```

yieldと非同期が組み合わさるとどうなるのかという話ですが、
それは次の引用に記述されている通りなのかなと理解しています。

> SagasはGenerator関数として実装され、redux-sagaミドルウェアにオブジェクトを引き渡す。生成されたオブジェクトはミドルウェアが解釈する一種の命令です。Promiseがミドルウェアに渡されると、ミドルウェアはPromiseが完了するまでSagaを停止させます。上記の例では、delayが返すPromiseが解決するまでincrementAsync Sagaは中断されます（1秒後）。
> https://redux-saga.js.org/docs/introduction/BeginnerTutorial/

[iBETA]

詳しくかいていただきありがとうございます。
yield難しいですw できることなら使いたくないですかねw

Answer 1

そもそもyieldは、非同期の関数を同期で動かす為のものではないことがわかりました。
同期か非同期かはさておき、awaitとは正反対！？的な動きをするのですかね。。。
ジェネレーター関数内でyieldを使い関数を実行しているのですが、
その関数を更にジェネレーター化して中でまたyieldを使う的なことをやってました。
完全には把握できてないですが、こういったことさえしなければ通常通り動きます。
なんで自己解決！？なのかなと。。。