📚 redux
redux에서 데이터가 업데이트될 때에 대해서 간단히 정리해보도록 하겠습니다.
- dispatch를 통해 action 발생
- reducer에서 데이터 업데이트
- 구독한 곳에 알려줌
위와 같은 동작은 동기적으로 동작합니다.
그렇기 때문에 리듀서는 순수함수여야합니다.
🤔 순수함수란?
외부 dependency에 영향을 받지 않으며 내부 사이드 이펙트가 없습니다.
같은 input이 들어가면 같은 ouput을 반환해야합니다. 이러한 특성을 어려운 말로
멱등성이라고 합니다.
그렇다면 순수하지 않는 작업은 어떤 것일까요???
결과값이 일지차지 않고 호출할때마다 매번 결과가 다를 수 있는거겟죠...?
이러한 작업에는 비동기처리나 api호출 등이 있습니다.
위의 코드를 보면 리듀서에서 api호출을 하고 있습니다.
api호출의 결과를 리듀서는 기다려주지 않고 state값을 업데이트 하고 있습니다.
비동기작업은 state상태를 업데이트하는게 불가능합니다.
그 이유는 리듀서가 동기함수 이기 때문입니다.
그래서 필요한게 바로 middleware입니다.
side effect가 있는 비동기 작업은 리듀서 밖에서 하며 그 작업을 할 수 있게 놀이터를 마련해주는 곳이 바로 middleware입니다.
지연 호출의 개념입니다.
📚 커링
커링: 사용자한테 인자와 인자사이에 개입을 할 수 있는 코딩 테크닉을 의미합니다.
아래 코드를 보면 첫번째 함수는 인자를 한번에 3가지를 다 받아서 처리를 하고 있습니다.
두번째 함수는 함수를 리턴하여 인자를 한개씩 받고 있습니다.
두번째 함수는 커링기법을 사용하였습니다.
커링기법의 장점은 인자와 인자 사이에 개입을 할 수 있으며, 중간에 함수를 리턴한 값을 변수에 담아두고서 사용하면 좀더 명시적으로 코드를 짤 수 있습니다.
바로 이러한 커링 기법을 사용하여 redux-saga가 만들어졌다고 합니다.
document를 읽어보면 몽키패칭 관련해서 내용이 나오는데 몽키패칭도 커링기법을 사용했다고 할 수 있습니다.
(자세한 내용: https://dobbit.github.io/redux/advanced/Middleware.html)
📚 middleware
미들웨어는 파이프라인이라고 할 수 있습니다.
중간에 데이터가 들어갔다 미들웨어를 거쳐 다시 나가는 형태입니다.
input이 들어오면 처리기(redux)를 지나 바로 output이 오는 형태가 아니라
그 중간에 middleware를 통해 데이터가 들어갔다 변형되어 나가는 것을 의미합니다.
middleware는 plugin과는 다르게 데이터 흐름이 중간에 꽃혔다고 생각하면 됩니다.
middleware는 항상 순서가 중요하면 꽃힌 순선대로 데이터가 흐릅니다.
middleware을 잘게 잘게 쪼개놓으면 redux가 중간에 투입할수 있습니다.
사용자인 리덕스가 middleware로 만들어진 함수를 중간에 조작하고 싶을 때,
리덕스가 개입하여 업데이트 가능하게 해주는게 커링 테크닉을 사용하는 이유입니다.
📚 redux-saga/effect
redux-saga/effect의 메소드를 통하여 saga한테 내가 이런일을 하고 싶다고 정보를 전달합니다.
call: promise 객체를 반환하는 함수를 호출합니다. (대신 호출해줍니다)
select: store에 있는 state에 접근하여 state값을 가져옵니다.
take: 해당 액션타입을 기다렸다가 그 액션이 들어오면 가로채어 액션을 실행합니다.
takeLatest: 연속된 액션이 계속 들어오면 맨 마지막 액션만 실행합니다.(ui에서 제어하지 않아도됨)
😳 최종 마무리
saga를 사용하면 ui와 비즈니스 로직을 분리하여 작업할 수 있습니다.
즉, saga에 비즈니스 로직을 generator를 통해 구현하고 ui쪽에서 .next()를 통해서 해당 로직을 실행한다는 뉘앙스로 이해하셔도 좋을 것 같습니다. 😳😳😂
