리덕스 미들웨어

| 리덕스 미들웨어

리덕스 미들웨어는 action을 dispatch 했을 때 reducer 에서 처리하기에 앞서 사전에 지정된 추가적인 작업을 실행할 수 있게 해줍니다.
즉, 중간역할 을 담당한다고 생각하시면 됩니다!

일반적으로 리덕스 미들웨어는 라이브러리를 설치하여 사용하며, 주로 비동기 작업을 처리 할 때 사용됩니다.
라이브러리의 종류로는 redux-thunk redux-saga redux-observable redux-promise-middleware 등이 있습니다.
이 중 자주 사용되는것은 redux-thunk 와 redux-saga 입니다.

흐름

액션 -> 미들웨어 -> 리듀서 -> 스토어

추가적은 작업의 종류

1. 특정 조건에 따라 action 을 무시하게 만들 수 있습니다.
2. 액션을 콘솔에 출력 OR Server에 로깅
3. 액션이 디스패치 됐을 때 수정해서 리듀서에게 전달.
4. 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다.
5. 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있습니다.

구조

//기본구조
const middleware = store => next => action {

}

함수를 반환하는 함수입니다.
파라미터로 받아오는 store는 리덕스 스토어 인스턴스, action은 디스패치 된 액션을 가리킵니다.

next는 middleware에서 사용되는 새로운 파라미터입니다.

이는 함수형태이며 store.dispatch와 비슷한 역할을 합니다.

차이점은, next(action)을 통해 다음 처리해야 할 미들웨어에게 액션을 넘겨주고 미들웨어가 없다면 리듀서에게 액션을 넘겨줍니다.

리덕스 미들웨어 는 왜 사용할까 ?

기존의 리덕스는 action 이 발생하면, dispatch를 통해 store에게 상태 변화의 필요성을 알리게 됩니다.
디스패치된 액션을 스토어로 전달하기 전에 처리하고 싶은 작업이 있을 경우, 미들웨어를 사용하면 됩니다.
가령, 단순히 어떤 액션이 발생했는지 로그를 남기거나 액션을 취소 OR 실행 하는 경우도 있습니다.

리덕스는 동기적인 흐르음을 통해 동작합니다.
action 객체가 생성되고, 디스패치가 액션 발생을 스토어에게 알리면, 리듀서는 정해진 로직에 의해 액션을 처리한 후 새로운 상태값을 반환하는 과정입니다.

하지만 동기적인 흐름만으로는 처리하기 힘든 작업들이 있습니다.
ex) delay 적인 작업, 외부 api data 요청

리덕스는 이런 비동기적인 작업을 처리하기 위한 지침을 알려주지 않고 있기 때문에 이러한 비동기 작업을 처리하는데 있어서 redux middleware를 주로 사용합니다.

리덕스 미들웨어로 비동기 작업 처리 과정

리덕스 미들웨어로 비동기 작업을 수행해야 하는 경우는 매우 다양합니다.
presentational 컴포넌트에 API로 요청한 정보를 출력해야 하는 액션이 발생할 경우, 처리하는 시간이 필요하기 때문에 이를 비동기 작업으로 수행하게 됩니다.

기존의 redux flow 과정

middle ware가 추가됐을 때 redux flow 과정

이렇게 비동기 작업을 처리할 때 사용하는 대표적인 미들웨어로는 2가지가 있습니다.

• redux-thunk : 가장 많이 사용되는 비동기 작업 미들웨어
• redux-saga : 전자 다음으로 많이 사용되는 비동기 작업 미들웨어 라이브러리.