reducer

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[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..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[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는 좀 더 까다롭고 복잡한 상황에서 유용하게 쓸 수 있는 미들웨어입니다. 아래왁 같..

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

1. 비동기 작업을 처리하는 미들웨어 사용 1.1.5 리펙토링 API를 요청해야 할떄마다 17줄이 넘는 thunk 함수를 작성하는 일과 로딩상태를 리듀서에서 관리하는 작업은 코드가 길어지고 번거로운 일입니다. 그렇기에 이번에는 반복되는 코드의 양을 줄여서 리펙토링을 진행 하겠습니다. - lib/createRequestThunk.js export default function createRequestThunk(type, request){ // 성공 및 실패 액션타입 정의 const SUCCESS = `${type}_SUCESS` const FAILURE = `${type}_FAILURE` return parms => async dispatch => { dispatch({ type }) //시작 try { ..