unidirectional flow in redux

redux에서 단방향 흐름을 strict하게 지켜야하는 가에 대해서 고민을 했었다. 고민을 하게 된 케이스는 두 개인데, 첫 번째는 단계가 있는 폼을 구현할 때, 현 스텝에서의 validation이 다음 스텝으로 넘어갈 수 있냐 없냐를 결정해야하는 경우. 두 번째는 여러 개의 폼이 api 호출 파라미터인 경우였다. 첫 번째부터 살펴보도록 하자.

사용자의 이메일, 비밀번호, 비밀번호 재입력 등을 입력받아서 다음으로 next를 누를 수 있냐 없냐를 결정하는 폼을 만든다고 생각했을 때, 과연 이메일, 비밀번호, 비밀번호 재입력을 처리하는 reducer에서 이 스텝의 validation을 처리하는 것이 맞냐는 것. 아예 다른 reducer에서 그걸 구현하려고 하니, 이 녀석의 파라미터로 들어오는 state, action에는 충분한 정보가 없거든. action에 셋 중에 하나의 값이 들어온다고 하더라도 나머지 두 개의 값은 다른 reducer에 존재하는 문제… 이건… store.getState() 를 써야하나…?

그래서 하나의 reducer에 valid 변수를 넣으려니, 각각의 스텝마다 validation을 체크해줘야 하는데, 이게 과연 맞는건가하는 의문이 들었다. 설명을 위해 간단히 3개의 폼으로 제한했지만 실제로 내가 구현한 폼은 선택에 따라서 3개의 서로 다른 내부 폼이 단 하나만 나타나게 되고, 그 선택된 내부 폼의 validation이 상위 폼의 validation에 전파되는 (…) 그런 구조였거든.

두 번째는 다음과 같다. 송금에서 배달 수수료 문제였는데, 택배로 치자면 배송료와 비슷한 이녀석은 보내는 국가, 보내는 금액, 보내는 방식, 보내는 방식의 세부 사항, 지역을 파라미터로 받는 녀석이었다. 유저가 이 5개 항목 중에 하나라도 변경하게 되면 새로 계산해서 다시 보여줘야하는 기능이 필요했는데, 이  reducer switch-case 문에 5군데에 같은 코드를 넣어야 하는 건가.

 


 

아직 명확하게 어떻게 해야겠다는 생각이 안잡혀 있다.

아직 redux에 대한 이해가 높지 않기도 하고, 또 다시 갈아엎어질 코드라서 적당히 angular의 $scope.$watch로 한 곳에서 관리하도록 짜놨는데, angular의 양방향과 redux의 단방향 모두 여기서는 일장일단이 있는 것 같아서 더 고민하는 것 같다.

여기서 단방향 흐름으로 strict하게 바꿔야 한다면 좀 더 적극적으로 redux-thunk를 사용해야할 듯 하고, 적당히 함수로 다시 한 번 더 래핑해주는 것도 좋을 것 같다는 생각만 하는 중. 그에 더불어 빠르게 angular를 버리고 싶은 마음도 굴뚝같다. ng-redux로 짜면 짤 수록 react가 더 좋아보여… 위에서 store.getState()를 쓰기에는 앵귤러라서 더러운 것도 있다. angular.injector(['ng', 'myApp']).get('$ngRedux').getState() 로 짜야하는 것인가..

Leave a Reply