[Redux] 리덕스 미들웨어란?

https://ko.redux.js.org/

 

 

 

 

 

리덕스 미들웨어의 동작 흐름

리덕스 미들웨어의 동작 흐름

 

 

 

 

리덕스 미들웨어를 왜 써야하나?

기존의 리덕스

액션 발생 -> 디스패치를 통해 스토어에게 상태변화 필요성 알림

              ⬇

이 사이에 처리하고 싶은 작업이 있다면?

ex) 어떤 액션이 발생했는지 로그 남기기, 액션 취소, 또 다른 액션 발생 등

 

 

리덕스 : 동기적인 흐름을 통해 동작

동기적 흐름이란?

액션 객체 생성, 디스패치가 액션 발생을 스토어에게 알림, 리듀서는 정해진 로직에 의해 액션을 처리한 후 새로운 상태값 반환하는 과정

 

하지만, 동기적 흐름만으로 처리하기 힘든 작업이 있다

ex) 시간 딜레이시켜 동작하게 하기, 외부 데이터 요청하여 그에 따른 응답을 화면에 보여주기 등

 

이런 작업들은 어떻게 해야하나?

리덕스 미들웨어 사용!

 

 

 

 

대표적인 리덕스 미들웨어는 무엇?

직접 만들어서 원하는 작업을 처리할 수도 있지만, 이미 만들어진 미들웨어를 사용하곤 한다.

• redux-logger : 어떤 액션이 발생했는지 로그를 남겨줌
• redux-thunk : 비동기 작업을 처리할 수 있게 해줌
• redux-saga : 위와 동일

 

 

 

 

redux-thunk

• 리덕스 미들웨어
• 비동기 작업을 처리하는데 사용하는 미들웨어 중 가장 대표적

thunk

주로 연산 결과가 필요할 때까지 연산을 지연시키는 용도로 사용되거나..

출처 : 위키백과-썽크

 

 

연산 지연시키는 방법은?

ex) console.log(1+2); 를 지연시키는 방법은?

const foo = () => {
	console.log(1+2);
}

 

 

 

 

redux-thunk가 thunk의 개념을 적용하는 방법은?

기존 리덕스에서 액션 생성 함수 : 액션을 객체 형태로 반환

리덕스 썽크에서 액션 생성 함수 : 액션을 객체가 아닌 함수 형태로 반환

-> 필요할 때 함수를 호출하는 썽크 형태!

 

 

 

 

참고자료

velog.io/@youthfulhps/리덕스-미들웨어는-무엇인가

리덕스 미들웨어는 무엇인가? (1)

 

velog.io/@youthfulhps/리덕스-미들웨어는-무엇인가-2

리덕스 미들웨어는 무엇인가? (2) redux-thunk