프론트엔드

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[10]

1. redux-saga 1. 4 코드 리펙토링 이번에는 반복되는 코드를 함수화하여 리펙토링을 진행 하겠습니다. 이전에 thunk 함수를 위해 만든 createRequestThunk 함수처럼 createRequestSaga를 만들겠습니다. - lib/createRequestSaga.js import { call, put } from "redux-saga/effects"; import { startLoading, finishLoading } from "../modules/loading"; export default function createRequestSaga(type, request) { const SUCCESS = `${type}_SUCCESS`; const FAILURE = `${type}_FAIL..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[9]

1. redux-saga 1. 3 API 요청 상태 관리하기 이번에는 redux-saga를 사용하여 API 요청을 해 보겠습니다. 기존에 thunk로 관리하던 액션 생성 함수를 제거하고, saga를 사용하여 처리합니다. sample 리덕스 모듈을 아래와 같이 수정합니다. - modules/sample.js import { createAction, handleActions } from "redux-actions"; import { call, put, takeLatest } from "redux-saga/effects"; import * as api from "../lib/api"; import { startLoading, finishLoading } from "./loading"; // 액션 타입을 선언합..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[8]

1. redux-saga 1.2 비동기 카운터 만들기 기존의 thunk 함수로 구현했던 비동기 카운터를 이번에는 redux-saga를 사용하여 구현해 보겠습니다. 우선 아래의 redux-saga 라이브러리를 설치해 주세요. yarn add redux-saga 그리고 counter 리덕스 모듈을 열고 기존 thunk 함수를 제거합니다. INCREMENT_ASYNC라는 액션 타입을 선언하세요. 해당 액션에 대한 액션 생성 함수를 만들고, 제너레이터 함수를 같이 만들어 줍니다. 이 제너레이터 함수를 사가(saga)라고 부르고 있습니다. - modules/counter.js import { createAction, handleActions } from "redux-actions"; import { delay, ..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[7]

1. redux-saga 이번에는 redux-saga 를 통해 비동기 작업을 관리하는 방법을 알아보려고 합니다. 이 미들웨어는 redux-thunk 다음으로 많이 사용되는 비동기 작업 미들웨어입니다. redux-thunk는 함수 형태의 액션을 디스패치하여 미들웨어에서 해당 함수에 스토어의 dispatch와 getState를 파라미터로 넣어서 사용하는 구조를 가지고 있습니다. 그래서 구현한 thunk 함수 내부에서 원하는 API를 요청하고, 다른 액션의 디스패치하거나 핸져 상태를 조회하기도 했습니다. 대부분의 경우에서는 이전 redux-thunk에서 이런 기능들을 충분히 구현할 수 있습니다. 이번에 다루는 redux-saga는 좀 더 까다롭고 복잡한 상황에서 유용하게 쓸 수 있는 미들웨어입니다. 아래왁 같..