reduxt-Toolkit으로 상태 관리하는 코드 간결화

지역 조건, 정렬순과 관련된 컴포넌트는 두개다 

- Condition: 상세검색 버튼

- AllPerformances : 상세검색 버튼 결과에 따라 데이터를 뿌려주는 상위 컴포넌트 

 

redux-toolkit으로 상태를 관리해야겠다고 생각한 이유는 

사용자가 선택한  정렬순과 지역 상태를 변경하겠다고 useState를 남발하게 됐기 때문이다. 

코드로 확인해보자. 

 

상위 컴포넌트인 AllPerformances 에서 정렬과 지역의 초기 상태값을 설정한 코드다. 

 

하위 컴포넌트 Condition에 해당 상태를 변경하는 함수를 내려줬다. 

 

Condition 함수에서 사용자가 선택한 지역값하고, 정렬 string 상태를 관리한다. 

 

상위 컴포넌트에서 받아온 변경 상태를 적용하는 함수를 이용해서 사용자가 선택한 값으로 상태를 변경해준다. 

 

사실 상위 컴포넌트에서 받아온 함수가 더 있었는데, onApply() 다. ㄴ

 

onApply는 applyConditions 함수이다. 

- 변경된 상태를 또, 다른 새로운 상태에 적용해주는 함수다. 

 

변경이 적용된 상태도 있다. 

 

그런데, 오류가 난다. 

조건 검색 버튼을 두번 눌러야만 실제 데이터가 반영된다. 

 

저렇게 많은 상태관리에서 데이터 흐름을 찾으려고 하는데 쉽지 않았다. 그래서 상태를 하나로 관리하는 코드가 필요해졌다. 

redux-toolkit으로 상태 하나로 관리하려고 한다. 

(현재는, 상태만 3개로 나눠서 관리하는 중이였다....)

 

그러면 컴포넌트끼리 의존성을 줄여서 데이터 흐름을 쉽게 확인할 수 있겠다 ! 

 

코드 작성해보자. 

01. 슬라이스 생성 

 

02. 스토어 구성 

performance 부분을 추가해줬다. 

 03. AllPerformance 컴포넌트 

상태를 가져오는 코드다. 

 

선택한 정렬 sort 를 입력해서 그에 맞는 데이터를 가져오는 코드다. 

 

Condition 하위 컴포넌트에 내려줄 인수가 없다. 

 04. Condition 컴포넌트 

상위 컴포넌트가 아니라, redux toolkit으로 관리하고 있는 전역적 상태에서 데이터를 가져온다.

 

사용자가 선택하는 지역과 정렬순을 dispatch 함수를 통해서 데이터를 변경한다. 

 

정말 깔끔하다... 상태관리는 필수적이다. 

아까 날뛰는 데이터들로 어지러웠었는데, redux-toolkit으로 코드가 정말 가독성이 좋아졌다. !!!!