Redux Saga 시작하기

부작용 처리를위한 인기있는 JavaScript 프레임 워크 소개

* 프리 픽 스토리에서 사용 된 요소

Takeaway.com의 프런트 엔드 팀은 주요 웹 애플리케이션을 최신 JavaScript 스택으로 마이그레이션하기 위해 열심히 노력하고 있습니다. Next.js, React 및 Redux Saga로 새로운 프런트 엔드 애플리케이션을 구축하고 있습니다. 시작했을 때 제 경험은 주로 Redux ThunkRedux Promise 였습니다. Redux Saga는 완전히 다른 야수이므로 기본 컨텍스트, 일반적인 접근 방식, 생성기 함수가 흐름에 어떻게 부합하는지, 라이브러리 사용의 장단점을 이해하는 데 시간이 좀 걸렸습니다.

Redux Saga에 대해 가능한 한 많이 배우려는 탐구를하는 동안 사용할 수있는 교육 리소스가 부족하여 실망했습니다. 그래서 저는 COVID-19 전체 상황으로 인해 자유 시간이 있기 때문에 Redux Saga를 시작하기위한 가이드를 만들 수 있다고 결정했습니다.

이 기사에서는 감속기 및 동작과 같은 Redux의 기본 개념을 이해하는 것이 도움이되지만 필수 사항은 아닙니다.

Redux Saga 코드로 이동하기 전에 몇 가지 기본 개념을 먼저 살펴 보겠습니다.

사가 란?

나는 당신에 대해 모르지만 Redux 라이브러리에 뛰어 들기 전에 Saga의 광범위한 프로그래밍 개념을 알지 못했습니다. Redux Saga의 기반이되는 디자인 패턴이므로이 개념을 설명하겠습니다.

마이크로 서비스 세계에서 사가는 여러 서비스 또는 비즈니스 도메인에 걸쳐있는 트랜잭션을 구현하는 데 도움이됩니다. saga 패턴은 애플리케이션 내에서 부작용을 처리하는 방법으로 설계되었습니다. Redux Saga 홈페이지는 프레임 워크를 다음과 같이 설명합니다.

응용 프로그램의 부작용 (예 : 데이터 가져 오기와 같은 비동기 작업 및 브라우저 캐시 액세스와 같은 불순한 작업)을보다 쉽게 ​​관리하고, 실행하기 쉽고, 테스트하기 쉬우 며, 실패 처리를 더 잘 처리하는 것을 목표로하는 라이브러리입니다.

콜백 지옥을 헤쳐나가는 데 상당한 시간을 소비 한 JavaScript 개발자로서, 확실히 좋은 것 같습니다!

Caitie McCaffrey의이 강연 은 Saga 패턴에 대해 자세히 설명합니다.

예를 들어 사용자가 장바구니에 항목을 추가하는 이벤트를 살펴 보겠습니다. Redux 상태 내에서 다음 항목에 액세스해야합니다.

  • 메뉴 항목 정보를 가져 오는 메뉴 컨텍스트
  • 항목의 가격을 결정하기위한 레스토랑 컨텍스트 ( 배송 및 픽업, 특별 제안 등이 다를 수 있음)
  • 항목을 추가하고 총 가격을 늘리기 위한 바구니 컨텍스트 .
  • 오류 컨텍스트 (및 추가로 사용하려는 로깅 서비스).

Redux Saga는 생성기 함수 를 많이 사용 합니다. 이 프레임 워크로 작업 할 때 제너레이터 함수를 가장 많이 사용합니다. 이 기사에서 자세히 다루지는 않겠지 만, 더 배우고 싶다면 MDN 문서를 읽는 것이 좋습니다 .

Redux Saga의 기본 사항을 이해하려면이 특정 종류의 기능에 대해 몇 가지만 알면됩니다. 생성기 함수를 사용하면 함수를 일시 중지 하고 프로세스가 완료 될 때까지 기다릴 수 있습니다. 이는 약속 해결 뒤에있는 사고 프로세스와 유사합니다.

생성기 함수의 기본 구문은 다음과 같습니다.

function* myGenerator() {
     const result = yield myAsyncFunc1()
yield myAsyncFunc2(result)
}

우리가 논의한 것보다 더 많은 생성기 함수가 있지만이 기사와 Redux Saga의 기본 사항을 이해하기에 충분합니다.

우리의 예

예를 들어 음식 주문 애플리케이션을 구축하기위한 기초를 고려할 것입니다. 이 유형의 앱에는 고려해야 할 특정 비즈니스 도메인이 있습니다. 우리는 이러한 논리의 차이점을 우리의 다른 맥락이라고 부를 것입니다.

  • 메뉴 : 항목, 카테고리, 옵션 또는 측면, 크기, 가격, 알레르겐 정보 등
  • 체크 아웃 : 선택한 품목 바구니, 총액, 세금, 배송비, 결제 수단, 바우처 등
  • 사용자 : 저장된 결제 수단, 저장된 주소, 이메일, 전화 번호 등

아직 배고프 니? 나도 😋 좋아, 가자!

루트 사가

다른 감속기결합 하는 루트 감속기 가 있다는 점에서 Redux의 감속기가 구성되는 방식과 유사하게 sagas는 root saga로 시작하여 구성됩니다.

function* rootSaga() {
  yield all([
    menuSaga(),
    checkoutSaga(),
    userSaga()
  ])
}

rootSaga체인의 기본 사가입니다. sagaMiddleware.run (rootSaga)에 전달되는 것은 saga입니다. menuSaga,, checkoutSaga그리고 userSaga우리가 슬라이스 사가 라고 부르는 것 입니다. 각각은 사가 트리의 한 섹션 (또는 슬라이스)을 처리합니다.

all()무엇 redux-saga등을 말한다 효과 크리에이터. 이것은 본질적으로 sagas (생성기 함수와 함께)가 함께 작동하도록 만드는 데 사용하는 함수입니다. 각 효과 생성자는 미들웨어에서 사용 하는 객체 ( 효과 라고 함 )를 반환합니다 redux-saga. Redux 작업 및 작업 생성자와 이름이 유사하다는 점에 유의해야합니다.

거기에 효과 제작자의 긴 목록 에서 redux-saga, 우리는 확실히 몇 가지를 다룰 것입니다. 이 경우, all()는 이펙트 생성기로 전달 된 모든 사가를 동시에 실행하고 모두 완료 될 때까지 기다리도록 사가에 지시합니다. 도메인 로직을 캡슐화하는 일련의 sagas를 전달합니다.

감시자 사 가스

이제 하위 사가 중 하나의 기본 구조를 살펴 보겠습니다.

import { put, takeLatest } from 'redux-saga/effects'
function* fetchMenuHandler() {
  try {
    // Logic to fetch menu from API
  } catch (error) {
    yield put(logError(error))
  }
}
function* menuSaga() {
  yield takeLatest('FETCH_MENU_REQUESTED', fetchMenuHandler)
}

처리기 함수의 본문을 try / catch 블록으로 래핑하여 비동기 프로세스 중에 발생할 수있는 오류를 처리 할 수 ​​있습니다. 여기에서 put()오류를 매장에 알리기 위해를 사용하여 별도의 작업을 발송 합니다. put()기본적으로 Redux redux-sagadispatch방법 과 동일합니다 .

자신의 앱에 별도의 오류 처리 메커니즘을 추가 할 것입니다.

const logError = error => ({
  type: 'LOG_ERROR',
  payload: { error }
})

function* fetchMenuHandler() {
  try {
    const menu = yield call(myApi.fetchMenu)
yield put({ type: 'MENU_FETCH_SUCCEEDED', payload: { menu } ))
  } catch (error) {
    yield put(logError(error))
  }
}

좋아요,이 개념들을 모아서 또 다른 하위 사가를 만들어 봅시다 checkoutSaga.

import { put, select, takeLatest } from 'redux-saga/effects'
function* itemAddedToBasketHandler(action) {
  try {
    const { item } = action.payload
const onSaleItems = yield select(onSaleItemsSelector)
    const totalPrice = yield select(totalPriceSelector)
if (onSaleItems.includes(item)) {
      yield put({ type: 'SALE_REACHED' })
    }
if ((totalPrice + item.price) >= minimumOrderValue) {
      yield put({ type: 'MINIMUM_ORDER_VALUE_REACHED' })
    }
  } catch (error) {
    yield put(logError(error))
  }
}
function* checkoutSaga() {
  yield takeLatest('ITEM_ADDED_TO_BASKET', itemAddedToBasketHandler)
}
사가 흐름의 높은 수준의 시각

우리는 여기서 새로운 효과를 사용하고 있습니다 — select(). Select는 selector를 통과하고 우리의 사가에서 바로 Redux 스토어의 일부를 검색합니다! 한 사가 내에서 여러 컨텍스트에 의존 할 때 매우 유용한 사가 내에서 상점의 모든 부분을 검색 할 수 있습니다.

선택기 란 무엇입니까? 선택기는 Redux에서 사용되는 일반적인 디자인 패턴으로, 상태를 전달하고 단순히 해당 상태의 작은 부분을 반환하는 함수를 만듭니다 . 예를 들면 :

const onSaleItemsSelector = state => state.onSaleItems
const basketSelector = state => state.basket
const totalPriceSelector = state => basketSelector(state).totalPrice

결론

많은 코드로 음식 주문 앱의 이벤트를 처리하기위한 구조를 만들 수있었습니다. 애플리케이션의 다음 도메인을 소개하고 싶을 때 새로운 watcher saga를 생성하여 root saga로 전달합니다. 그런 다음 작업을 수신하고 부작용을 수행하는 핸들러를 만듭니다.

Redux 흐름에 새로운 (부작용) 효과를 도입하기 위해 복잡한 멘탈 모델과 스파게티 코드를 만들 필요가 없기 때문에이 설정을 확장하는 것은 쉽고 논리적입니다.

Redux Saga는 애플리케이션에서 발생할 다양한 변경 사항과 부작용을 관리하기위한 훌륭한 프레임 워크입니다. 이펙트 라고하는 매우 유용한 도우미 메서드 를 제공하여 액션을 전달하고 상태 조각을 검색하는 등의 작업을 수행 할 수 있습니다.

향후 기사에서는 데모 애플리케이션을 구축하고 고급 개념에 대해 알아볼 것입니다. 이것이 좋은 입문서가 되었기를 바라며 이제 Redux Saga를 시작할 수있는 탄탄한 기반을 갖추 셨기를 바랍니다.

피드백이 있으십니까? 제안? 그냥 인사하고 싶어? LinkedIn 또는 Twitter 에서 저에게 연락하십시오 !

Suggested posts

좋은 습관을 만들고 유지하는 방법

장기적인 습관을 유지하기위한 생산성 팁

좋은 습관을 만들고 유지하는 방법

두 아이의 엄마가 된 후 일을 끝내기가 더 어려워졌습니다. 나는 한 작업에서 다음 작업으로 뛰어 들었고 하루가 끝날 때까지 아무것도하지 않았을 때 실망했습니다.

양자 컴퓨팅 Pt를위한 프로그래밍. 1 : NumPy

이제 양자 컴퓨팅이면의 물리학을 배우기 시작 했으므로 "이봐, 실제로 양자 컴퓨터를 사용하려면 실제로 양자 장치를 손으로 만들어야합니까?"라고 궁금해 할 것입니다. 답은 양자 컴퓨터를 컴퓨터라고 부르는 이유가 있습니다. 프로그래밍이 가능합니다! 이 시리즈에서는 수학 개념을 시뮬레이션하고 양자 컴퓨터에서 실행하는 소프트웨어를 구축하는 방법을 배우게됩니다. 깨끗하고 현대적이며 라이브러리가 풍부한 언어이기 때문에 Python을 사용하여 코드를 작성할 것입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.