React/Redux (5) 썸네일형 리스트형 Redux-saga - Promise 작업 처리 리덕스사가에서 promise 작업을 처리하는 방법에 대해서 다룰 것이다. 먼저, 아래는 리덕스 떵크에서 비동기 작업을 처리하던 방식이다. id값이 들어오면, GET_POST 액션을 디스패치하고, 비동기로 api를 호출한 후, 성공하는지 실패하는지에 따라서 SUCCESS와 ERROR가 디스패치된다. 이를 사가에서는 이런식으로 처리한다. 먼저 액션 생성함수를 만들어 준다. 그 후, 그 액션이 디스패치 되면, 액션을 모니터링 하여 getPostSaga가 실행되도록 해준다. call이란 함수는 postAPI.getPostById라는 함수를 받아와 id를 인자로 써서 실행토록 한다. 그 후, promise를 받아오면, post라는 변수에 프로미스를 담는다. 그 후, 새로운 액션을 put으로 디스패치 한다. Redux-saga - 기본 리덕스 사가를 작성할 때는 제너레이터 문법을 통해 작성한다. 예를 들어, 리덕스 사가에서 delay와 put이라는 함수를 불러왔다. delay는 말 그대로 몇 ms를 딜레이 시키는 함수이고, put은 디스패치와 비슷한 함수이다. increase()를 호출해서 increase 액션 객체를 만들고, 그 객체를 호출하여 리덕스 사가 미들웨어에 명령을 하는 것이다. 리덕스 미들웨어에게 특정 명령을 수행하라고 하기 위해서는 yield를 하면 된다. 보면, yield를 통해 delay(1000) 이라는 함수를 수행할 것을 미들웨어에 보내고 있다. increaseAsync라는 함수를 실행했을 때, increaseSaga라는 명령을 내리게 하고 싶다. 그러면 이제 takeEvery라는 함수도 불러오자.' takeEve.. Redux-saga - Generator 문법 리덕스 사가는 리덕스 떵크와 함께 가장 많이 쓰이는 비동기 작업 관련 미들웨어이다. 리덕스 사가는 액션을 모니터링 하고 있다가 특정 액션이 발생하면 어떠한 특정 작업을 하는 미들웨어이다. 리덕스 사가를 사용하면 여러 까다로운 작업을 처리할 수 있다. 예를 들어, 비동기 작업을 진행할 때 기존 요청을 취소할 수 있다. 또는 맨 처음/맨 마지막 액션만 처리하거나, 특정 액션이 발생 했을 때 이에 따라 다른 액션을 디스패치하거나 자바스크립트 코드를 실행할 수 있다. 또, 웹소켓을 사용하는 경우 Channel 이라는 기능을 사용하여 더욱 효율적으로 코드를 관리할 수 있다. 또, 비동기 작업이 실패했을 때 재시도 하는 기능을 구현할 수도 있다. 리덕스 사가는 자바스크립트의 제너레이터 (Generator) 라는 문.. Redux-thunk 리덕스 떵크는 액션 객체가 아닌 함수를 디스패치 할 수 있도록 해주는 라이브러리이다. 비동기 작업을 처리하기 위해서 주로 사용되는데, 정말 많이 사용된다고 한다. 기본적인 원리는 아래와 같다. 떵크라는 함수는 미들웨어의 역할로써 중간에 위치하는데, 액션을 받아오면, 그 액션이 함수 타입인지 먼저 확인한다. 만약 액션이 함수타입이 아니라면, 가령 객체타입이라면, next 함수로 넘어가 그대로 다음 미들웨어 혹은 리듀서로 전달되고, 만약 함수타입이라면, 액션의 디스패치와 상태를 가져와 실행한다. 이를 통해 어떤 작업들을 할 수 있냐면... getComments 라는 함수에서는 액션을 dispatch 할수도 있고, state를 가져올 수도 있다. 위 함수는 api를 요청한 뒤, api에서 받아오는 값에 따라서.. Redux - Middleware 리덕스 미들웨어는 액션에서 리듀서로 가기 전에 데이터를 한번 더 처리할수 있게 해주는 리덕스 기능이다. 리덕스가 다른 상태 관리 라이브러리들과 차별점을 가지는 부분이기도 한데, 미들웨어를 이용해서 여러 부가적인 설정들을 넣어 더 복합적이고 다채로운 액션을 처리할 수 있다. 예를 들어, 어떤 액션이 디스패치 되었을 때, 상태를 통해 판단한 후 액션을 디스패치할지 말지를 결정시킨다던지, 비동기 작업을 전처리 한다던지, 새로운 액션을 디스패치 시킨다던지 같은 작업들을 처리할 수 있다. 리덕스 미들웨어는 주로 비동기 작업을 처리할 때 사용된다. 가령 API 요청 후에 새로운 페이지로 리디렉트 시킨다던지, 등등. 리덕스는 미들웨어 함수는 이런식의 템플릿을 갖고 있다. 위 템플릿은 아래와 같은 뜻이다. 즉 함수를 .. 이전 1 다음
