[javascript] ES6 생성기와 함께 redux-saga 사용 vs ES2017과 함께 redux-thunk 사용의 장단점 async / await

redux-saga에서 위의 예와 동등한 것은

export function* loginSaga() {
  while(true) {
    const { user, pass } = yield take(LOGIN_REQUEST)
    try {
      let { data } = yield call(request.post, '/login', { user, pass });
      yield fork(loadUserData, data.uid);
      yield put({ type: LOGIN_SUCCESS, data });
    } catch(error) {
      yield put({ type: LOGIN_ERROR, error });
    }
  }
}

export function* loadUserData(uid) {
  try {
    yield put({ type: USERDATA_REQUEST });
    let { data } = yield call(request.get, `/users/${uid}`);
    yield put({ type: USERDATA_SUCCESS, data });
  } catch(error) {
    yield put({ type: USERDATA_ERROR, error });
  }
}

가장 먼저 알아야 할 것은 form을 사용하여 api 함수를 호출한다는 것 yield call(func, ...args)입니다. call효과를 실행하지 않고와 같은 일반 객체를 만듭니다 {type: 'CALL', func, args}. 실행은 기능을 실행하고 그 결과로 생성기를 다시 시작하는 redux-saga 미들웨어에 위임됩니다.

주요 이점은 간단한 등식 검사를 사용하여 Redux 외부에서 발전기를 테스트 할 수 있다는 것입니다

const iterator = loginSaga()

assert.deepEqual(iterator.next().value, take(LOGIN_REQUEST))

// resume the generator with some dummy action
const mockAction = {user: '...', pass: '...'}
assert.deepEqual(
  iterator.next(mockAction).value,
  call(request.post, '/login', mockAction)
)

// simulate an error result
const mockError = 'invalid user/password'
assert.deepEqual(
  iterator.throw(mockError).value,
  put({ type: LOGIN_ERROR, error: mockError })
)

우리는 단순히 모의 데이터를 next반복자 의 메소드에 주입하여 API 호출 결과를 모의하고 있습니다 . 데이터 모의는 모의 함수보다 훨씬 간단합니다.

두 번째로 알아야 할 것은에 대한 호출 yield take(ACTION)입니다. 썽 크는 각각의 새로운 액션 (예 :)에서 액션 제작자가 호출합니다 LOGIN_REQUEST. 즉, 액션은 지속적 으로 썽크에 푸시 되며 썽 크는 이러한 액션의 처리를 중지 할시기를 제어 할 수 없습니다.

REDUX – 사가에서, 발전기는 풀 다음 조치를. 즉, 어떤 행동을들을 때와하지 말아야 할시기를 통제 할 수있다. 위의 예제에서 흐름 명령은 while(true)루프 내부에 배치 되므로 각 들어오는 동작을 수신하여 썽크 푸시 동작을 모방합니다.

풀 접근 방식으로 복잡한 제어 흐름을 구현할 수 있습니다. 예를 들어 다음 요구 사항을 추가한다고 가정합니다.

• LOGOUT 사용자 조치 처리

• 첫 번째 로그인에 성공하면 서버는 expires_in필드에 저장된 지연 시간이 지난 토큰을 반환 합니다. expires_in밀리 초 마다 백그라운드에서 인증을 새로 고침해야합니다.

• API 호출의 결과를 기다릴 때 (초기 로그인 또는 새로 고침) 사용자가 중간에 로그 아웃 할 수 있음을 고려하십시오.

썽 크로 어떻게 구현하겠습니까? 또한 전체 흐름에 대한 전체 테스트 범위를 제공합니까? Sagas에서 어떻게 보일 수 있습니까?

function* authorize(credentials) {
  const token = yield call(api.authorize, credentials)
  yield put( login.success(token) )
  return token
}

function* authAndRefreshTokenOnExpiry(name, password) {
  let token = yield call(authorize, {name, password})
  while(true) {
    yield call(delay, token.expires_in)
    token = yield call(authorize, {token})
  }
}

function* watchAuth() {
  while(true) {
    try {
      const {name, password} = yield take(LOGIN_REQUEST)

      yield race([
        take(LOGOUT),
        call(authAndRefreshTokenOnExpiry, name, password)
      ])

      // user logged out, next while iteration will wait for the
      // next LOGIN_REQUEST action

    } catch(error) {
      yield put( login.error(error) )
    }
  }
}

위의 예에서는를 사용하여 동시성 요구 사항을 표현하고 race있습니다. 경우 take(LOGOUT)승리 경주 (즉, 사용자가 로그 아웃 버튼 클릭). 레이스는 authAndRefreshTokenOnExpiry백그라운드 작업을 자동으로 취소합니다 . 그리고 통화 authAndRefreshTokenOnExpiry도중에이 차단 된 경우 call(authorize, {token})에도 취소됩니다. 취소는 자동으로 아래쪽으로 전파됩니다.

위의 흐름에 대한 실행 가능한 데모를 찾을 수 있습니다

답변

const loginRequest = {
    type: 'LOGIN_REQUEST',
    payload: {
        name: 'admin',
        password: '123',
    }, };

export const thunkName =
   parameters =>
        (dispatch, getState) => {
            // Your application logic goes here
        };

function* mySaga() {
    // ...
}