카테고리 없음

리덕스-사가와 ES6 제너레이터를 사용하는 장단점 대 ES2017 비동기/대기와 함께 사용하는 리덕스-덩크의 장단점

스택큐힙리스트 2023. 12. 26. 16:01
반응형

// auth.js
import request from 'axios';
import { loadUserData } from './user';
// 상수 정의
// 초기 상태 정의
// 기본 리듀서 내보내기
export const login = (user, pass) => async (dispatch) => {
    try {
        dispatch({ type: LOGIN_REQUEST });
        let { data } = await request.post('/login', { user, pass });
        await dispatch(loadUserData(data.uid));
        dispatch({ type: LOGIN_SUCCESS, data });
    } catch(error) {
        dispatch({ type: LOGIN_ERROR, error });
    }
}
// 더 많은 액션...
// user.js
import request from 'axios';
// 상수 정의
// 초기 상태 정의
// reducer 내보내기
export const loadUserData = (uid) => async (dispatch) => {
    try {
        dispatch({ type: USERDATA_REQUEST });
        let { data } = await request.get(`/users/${uid}`);
        dispatch({ type: USERDATA_SUCCESS, data });
    } catch(error) {
        dispatch({ type: USERDATA_ERROR, error });
    }
}
// 더 많은 액션...

답변 1

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)
      ])
      // 사용자가 로그아웃했으므로 다음 while 반복은
      // 다음 LOGIN_REQUEST 액션을 기다립니다
    } catch(error) {
      yield put( login.error(error) )
    }
  }
}

위의 예제에서는 race를 사용하여 동시성 요구 사항을 표현합니다. 만약 take(LOGOUT)이 경주에서 이기면 (즉, 사용자가 로그아웃 버튼을 클릭한 경우) authAndRefreshTokenOnExpiry 백그라운드 작업은 자동으로 취소됩니다. 그리고 만약 authAndRefreshTokenOnExpiry가 call(authorize, {token}) 호출 중간에 차단되었으면 이것도 취소됩니다. 취소는 하향으로 자동으로 전파됩니다.


위의 플로우에 대한 실행 가능한 데모를 여기에서 찾을 수 있습니다

답변 2

리덕스 사가와 ES6 제너레이터 vs 리덕스 펑크와 ES2017 비동기/동기의 장단점
리덕스는 자바스크립트 애플리케이션에서 상태 관리를 도와주는 라이브러리입니다. 리덕스 사가와 리덕스 펑크는 리덕스와 함께 사용되는 미들웨어로서, 비동기 작업을 처리하는 데에 특화되어 있습니다. 이번 글에서는 리덕스 사가와 ES6 제너레이터, 그리고 리덕스 펑크와 ES2017 비동기/동기를 비교하여 장단점을 알아보겠습니다.
리덕스 사가는 ES6 제너레이터를 기반으로 동작하는 미들웨어입니다. 제너레이터는 비동기 작업을 자연스럽게 처리할 수 있게 해주는 기능입니다. 이를 활용하여 네트워크 요청이나 데이터 로딩과 같은 비동기 작업을 보다 쉽게 관리할 수 있습니다. 리덕스 사가를 사용하는 가장 큰 장점 중 하나는 비동기 작업의 로직을 분리하여 관리할 수 있다는 것입니다. 이는 애플리케이션의 코드를 보다 깔끔하고 가독성 좋게 만들어줍니다. 또한, 사가의 제너레이터는 선언적이고 동기적인 코드로 비동기 작업을 처리할 수 있게 해줍니다. 이는 코드를 작성하고 디버깅하는 과정을 보다 단순하게 만들어줍니다.
하지만, 사용자가 사가와 제너레이터를 이해하고 익히는 데에는 학습 곡선이 존재할 수 있습니다. 제너레이터 문법은 이전의 자바스크립트 문법과는 다르기 때문에 초기에는 조금 생소할 수 있습니다. 그러나 사가와 제너레이터를 사용하는 것에 대해 숙달되면 많은 장점을 얻게 될 것입니다.
리덕스 펑크는 ES2017의 async/await를 활용한 미들웨어입니다. async/await는 프로미스를 기반으로 비동기 작업을 처리하는 문법입니다. 이를 활용하여 사가와 제너레이터를 사용하지 않고도 비동기 작업을 처리할 수 있습니다. async/await의 가장 큰 장점 중 하나는 비동기 코드를 동기적으로 작성할 수 있다는 것입니다. 이는 코드의 가독성을 높여줍니다. 또한, async/await는 기존의 자바스크립트 문법과 비교적 호환성이 높아 사용자에게 익숙한 문법이기도 합니다.
그러나, 펑크와 async/await은 코드의 복잡성을 증가시킬 수 있습니다. 비동기 작업을 처리하기 위해 필요한 async 키워드와 await 키워드가 코드에 추가되면서 코드의 길이가 길어지기 때문입니다. 또한, 펑크와 async/await을 사용할 경우에는 비동기 작업의 관리가 상대적으로 어려울 수 있습니다. 코드 중간에 콜백 함수를 여러 번 작성해야 하기 때문에 코드의 구조를 파악하기 어려워질 수 있습니다.
결론적으로, 리덕스 사가와 ES6 제너레이터, 그리고 리덕스 펑크와 ES2017 비동기/동기의 선택은 개발자의 개인적인 선호와 프로젝트의 요구사항에 따라 다를 수 있습니다. 리덕스 사가와 제너레이터를 사용하면 코드의 가독성과 유지보수성이 향상되지만, 기존의 자바스크립트 문법과는 차이가 있을 수 있습니다. 반면에 리덕스 펑크와 async/await는 자바스크립트 문법과 호환성이 좋지만, 코드의 복잡성이 증가할 수 있습니다. 따라서, 상황에 맞게 적절한 방식을 선택하여 개발하면 좋습니다.

반응형