React

[TIL/React] 2023/05/23

redux-logger오픈소스 커뮤니티에 있는, 더 잘 만들어진 로거 미들웨어를 활용하는 방법에 대해 학습했다.설치적용store.js 수정더 예쁘게 기록이 된다고 합니다!비동기 작업을 처리하기 위한 미들웨어 사용해보기redux-thunk, redux-promise-mi

2023년 5월 23일1min read

redux-logger

오픈소스 커뮤니티에 있는, 더 잘 만들어진 로거 미들웨어를 활용하는 방법에 대해 학습했다.

설치

code

yarn add redux-logger

적용

store.js 수정

더 예쁘게 기록이 된다고 합니다!

비동기 작업을 처리하기 위한 미들웨어 사용해보기

redux-thunk```, ```redux-promise-middleware```, ```redux-pender```는 각각 다른 방식으로 비동기 액션을 처리한다고 한다.


## 1. redux-thunk 🔴

리덕스를 사용하는 어플리케이션에서, 비동기 작업을 처리할 때 가장 기본적으로 사용하는 미들웨어가 바로 ```redux-thunk```이다.

###  a) thunk란? 🟠

 ```thunk```는, 특정 작업을 나중에 하도록 미루기 위해서 함수 형태로 감싼 것을 칭한다. 

가령, ```1+2```를 당장 하고 싶다면 다음과 같은 코드를 작성할 수 있다.

const x = 1 + 2;

code


위 코드가 실행되면 ```1+2```의 연산이 바로 진행된다.

const foo = () => 1 + 2;

code


코드를 위와 같이 변경하면, ```1+2```의 연산이 코드가 실행될 때 바로 이뤄지지 않고, 'foo()'가 호출되어야만 이뤄진다.

###  b) redux-thunk라는 middleware의 역할은? 🟠

=> 객체 대신, "함수를 생성하는" 액션 생성함수를 작성할 수 있게 해준다. 리덕스에서는 기본적으로 액션 객체를 dispatch한다. 

만약 특정 액션이 몇초 뒤에 실행되게 하거나, 현재 상태에 따라 아예 액션이 무시되게 하려면, 일반 액션 생성자로는 불가능하다. redux-thunk는 이러한 상황을 가능하게 해준다.

**1초 뒤 액션이 dispatch되게 하는 예제코드**

![](https://velog.velcdn.com/images/minkwan/post/686d0c96-6bb7-435e-92cb-6568059c7708/image.png)

**조건에 따라, 액션을 dispatch하거나 무시하는 예제코드**

![](https://velog.velcdn.com/images/minkwan/post/f64d719b-28cd-47e3-b97a-e3960adb3973/image.png)

예제 코드만 봐서는 감이 잘 오지 않는다. 직접 카운터 예제에 적용했다.

### c) 설치와 적용 🟠

**설치**

yarn add redux-thunk