[Redux] redux-saga effect


take
const somethingSuccess = yield take(ACTION_TYPES.SOMETHING_SUCCESS);

console.log("somethingSuccess 액션이 실행되었습니다.");
  • は、特定のタイプの動作を待つ、すなわち、動作が送信される前に次のコードに移動しない:
  • .
  • は、その動作がオブジェクト
  • に戻るのを待つ.
  • は、複数の動作
  • を待つことができる.
    ◆最初に実行した動作の対象を返し、ある動作を実行した場合は次のコードへ
    const somethingActions = yield take([ACTION_TYPES.FIRST_SUCCESS,ACTION_TYPES.SECOND_SUCCESS]);
    
    if(somethingActions.type === 'ACTION_TYPES.FIRST_SUCCESS'){
     console.log("firstSuccessAction");
    }else {
     console.log("secondSuccessAction");
    }
    アクションシーンが待っています
    const [fistSuccessAction, secondSuccessAction] = yield all([
          take(ACTION_TYPES.FIRST_SUCCESS),
          take(ACTION_TYPES.SECOND_SUCCESS),
        ]);
    
     console.log("firstSuccessAction,secondSuccessAction");
    
    debounce
  • ある動作が実行されると、その動作が秒数以内に実行されない場合、関数は実行されます.
    ex)FIRST ACTION動作が発生した後、0.5秒以内にFIRST ACTIONが発生しなければfirstAction関数を実行し、FIRST ACTION動作が発生してから0.5秒以内にFIRST ACTIONが発生した場合、再び0.5にリセットし、0.5秒以内にFIRST ACTION動作が実行されなければ、この動作
  • を実行する.
    import {debounce} from 'redux-saga/effects'; 
    
    function* firstAction(action:ReturnType<typeof firstAction >){
     ...
    };
    
    function* saga(){
     yield all([...,debounce(500,FIRST_ACTION,firstAction)])
    }
    debouncing
    throttle
    特定の動作を実行すると、その秒内に実行される同じ動作は無視されます
    遅延期間において、この動作は最大1回のを実行することができる.
    import { throttle } from 'redux-saga/effects'
    
    function* handleInput(input) {
      // ...
    }
    
    function* watchInput() {
      yield throttle(500, 'INPUT_CHANGED', handleInput)
    }
    cancle
  • ある関数がcancleによって中断する場合、中断した関数内でfinally構文を使用すると、中断してもfinally構文に入るため、いくつかの動作
  • を中断して実行することができる.
  • 降伏キャンセル(task)タスク完了を待たない
  • 
    function* authorize(user, password) {
      try {
        ...
        return token
      } catch(error) {
        yield put({type: 'LOGIN_ERROR', error})
      } finally {
        if (yield cancelled()) {
          // ... put special cancellation handling code here
        }
      }
    }
    
    function* loginFlow() {
      while (true) {
        const {user, password} = yield take('LOGIN_REQUEST')
        // fork return a Task object
        const task = yield fork(authorize, user, password)
        const action = yield take(['LOGOUT', 'LOGIN_ERROR'])
        if (action.type === 'LOGOUT')
          yield cancel(task)
        yield call(Api.clearItem, 'token')
      }
    }
    cancled
    race
    遅延運転終了の影響キャンセル
  • キャンセルの効果finally文でキャンセル収益率()を使用してキャンセルすると、特定の動作
  • が発生します.
    const {posts, timeout} = yield race({
        posts: call(fetchApi, '/posts'),
        timeout: delay(1000)
      }) // 1초안에 posts 실행이 끝나지 않으면 posts는 취소됌
    
      if (posts)
        yield put({type: 'POSTS_RECEIVED', posts})
      else
        yield put({type: 'TIMEOUT_ERROR'})
    all
  • サードパーティ関数を配列形式でパラメータに入れると、サードパーティ関数がすべて解析されるまで並列に同時に実行されるのを待つ.
  • の効果が拒否されると、すべての効果が自動的にキャンセルされます.
  • join
  • forkタスクの終了を待つ
    fork
    function* fetchAll() { // 1초가 지나고, task1과 task2가 마친 뒤에야 fetchAll 종료 됨
      const task1 = yield fork(fetchResource, 'users')
      const task2 = yield fork(fetchResource, 'comments')
      yield call(delay, 1000)
    }
    call
    function* fetchAll() { // task1이 종료되고 task2이 종료되고 1초가 지나야 fetchAll 종료 됨
      const task1 = yield call(fetchResource, 'users')
      const task2 = yield call(fetchResource, 'comments')
      yield call(delay, 1000)
    }

  • 並列
    ◇パラレル効果でエラーが発生した場合、待機中のすべての効果はキャンセルされます
  • function* fetchAll() { // task1과 task2이 종료되어야 다음 코드로 넘어가고 1초가 지나야 fetchAll 종료 됨
      yield [call(fetchResource, 'users'), call(fetchResource, 'comments')];
      yield call(delay, 1000)
    }
    actionChannel
  • actionChannel(action,buffer)
  • 特定の動作をキューに入れる、*バッファ
  • を順番に処理する.
    const somethingActhionChannel = yield actionChannel(ActionTypes.SOMETHING)
    **takeEveryは、特定のアクションが発生するたびに、特定のアクションに対してすべてのプライベート関数を実行しますが、順番に実行されることは保証されません.
    eventChannel
  • 外部イベントチャネル
  • を購読できます.