소켓 이벤트로 프론트와 서버사이의 어떤 데이터들을 주고 받는 로직은 socket/socket.ts 에 정의되어 있는 함수로 땜빵 중이었는데 갈수록 어디에도 속하지 않고 겉도는 느낌이었습니다.
그래서 아래와같은 이벤트 흐름이 있었죠. 여기저기 쏘다니면서 어디서 에러를 터트릴지도 모르겠고 코드도 왔다갔다 하면서 유지보수하기 굉장히 힘들었습니다.
-> view 에서 socket event 구독
-> socket 이벤트 발생
-> view 에서 dispatch
-> saga 에서 비동기처리 후 dispatch
-> reducer 에서 state 업데이트
다행히 redux-saga 에서 제공하는 channel 이벤트를 이용하면 파입입출력, 소켓 이벤트와 같은 외부 이벤트와 결합할 수 있는 방법을 사용할 수 있게 됩니다.
그래서 아래와 같은 순서로 socket event 를 핸들링 가능해집니다.
-> channel 에서 이벤트 수신
-> saga 에서 비동기 로직 처리
-> action dispatch
or
-> view 에서 action dispatch
-> channel 을 통해 이벤트 push
아직 이해를 제대로 못한 부분이 있어서 코드가 상당히 더럽지만 로직이 단순화 되고 관련있는 side effect 끼리 묶여서 saga 안에서 처리되니 에러처리나 코드 관리가 쉬워질 것 같습니다.
소켓 이벤트는 서버와 프론트 어디에도 포함되지 않는 외부이벤트입니다.
소켓 이벤트로 프론트와 서버사이의 어떤 데이터들을 주고 받는 로직은
socket/socket.ts에 정의되어 있는 함수로 땜빵 중이었는데 갈수록 어디에도 속하지 않고 겉도는 느낌이었습니다.그래서 아래와같은 이벤트 흐름이 있었죠. 여기저기 쏘다니면서 어디서 에러를 터트릴지도 모르겠고 코드도 왔다갔다 하면서 유지보수하기 굉장히 힘들었습니다. -> view 에서 socket event 구독 -> socket 이벤트 발생 -> view 에서 dispatch -> saga 에서 비동기처리 후 dispatch -> reducer 에서 state 업데이트
다행히
redux-saga에서 제공하는channel이벤트를 이용하면 파입입출력, 소켓 이벤트와 같은 외부 이벤트와 결합할 수 있는 방법을 사용할 수 있게 됩니다.그래서 아래와 같은 순서로 socket event 를 핸들링 가능해집니다. -> channel 에서 이벤트 수신 -> saga 에서 비동기 로직 처리 -> action dispatch or -> view 에서 action dispatch -> channel 을 통해 이벤트 push
아직 이해를 제대로 못한 부분이 있어서 코드가 상당히 더럽지만 로직이 단순화 되고 관련있는 side effect 끼리 묶여서 saga 안에서 처리되니 에러처리나 코드 관리가 쉬워질 것 같습니다.