내가 작성한 코드에서 검색버튼 이벤트가 발생한 후 흐름을 예를 들어서 설명을 해주겠다.
상단의 소스는 한 화면을 나타내는 소스이다.
이 화면에서 mainSearch() 이벤트가 Toolkit과 Saga를 이용하여 어떤식으로 흘러가는지 알아보자
1. [검색] 버튼을 클릭하게되면 SearchPanel의 mainSearch() 함수를 실행시킨다.
2. mainSearch()에서는 setParam() 를 실행하면서 param state값을 변경해주게 된다.
3. param값이 변경되고나면 param의 변경을 감지하고있는 useEffect(()=>{},[param])가 실행되고 slice에 정의해둔 (import { MasterStopCodeAction } from './slice') MasterStopCodeAction.load 액션이 dispatch로 실행되게 된다.
4. slice로 이동
[mainView]
↓
[slice]
5. load 액션이 실행되고나면 state값을 업데이트해주는데 파라미터를 보면
첫번째 state는 initialState에서 선언해둔 현재 state값을 가지고 있고
두번째 payload에는 이전에 화면에서 load액션을 dispatch할때 함께 보낸 파라미터값(조회 조건)이 들어가있다.
이렇게 받은 파라미터를 각 state에 업데이트 시켜준다.
6. load 액션이 실행되고 나면 Saga에서는 load 액션을 감지하여 캐치하게된다.
7. saga로 이동
[slice]
↓
[saga]
8. 가장 하단을 보게되면 export function* watchMasterStopCode() 안에 takeLatest의 첫번째 파라미터가 slice에서 만들어둔 load 액션을 감지한뒤 두번째 파라미터의 selectMasterStopCodeList() 함수를 실행한다는 의미이다.
9. 상단에 보게되면 export function* selectMasterStopCodeList가 있다 이걸 실행시킨다.
10. yield select()를 사용하여 Selector의 데이터(MasterStopCodeSelector.searchParam)를 가져와서 const param에 적재
11. yield call() 함수를 사용하여 api 호출(getMasterStopCodeList)하고 결과값을 result에 저장한다.
12. yield call()호출이 끝나고 yield put()를 이용하여 slice에 정의해둔 loadSuccess함수를 호출한다. (비동기제어를 이런식으로 편하게 다룰 수 있다.)
13. loadSuccess가 호출되었으니 다시 slice로 이동한다.
[saga]
↓
[slice]
14. loadSuccess가 호출되면 받아온 파라미터값을 원하는 state값에 넣어준다. 우리는 totalCount,list값을 사용하여 화면에 그리드에 값을 뿌려줄 예정이다.
15. 원하는 state값이 업데이트 되었다면 이 값을 불러서 사용하도록 화면으로 이동한다.
[slice]
↓
[GridComponent (in mainView)]
16. mainView에 적재해두었던 GridComponent을 보면 Selector를 가지고와서 이전에 업데이트한 list값과 totalCount값을 불러온다.
17. 그 후 useEffect에 list값을 감지하여 list값이 변화한다면 dataSource state값을 세팅해주고 이 dataSource를 그리드에 넣어주어 원하는 데이터를 화면에 보여준다. (끝ㅋ)
Selector 가 어떤과정으로 세팅이되어서 불러와지는지 살펴보려면 slice를 보면 된다. 위에서 useSelector 부분을 보게되면 MasterStopCodeSelector의 all 를 호출하여 그 안에 list, totalCount 값을 이용한다는 의미이다.
slice에 all 함수를 한번 보게되면
slice 하단에 우리는 빨간색으로 표시된 all를 호출한 것이다. 단순하게 list값만 호출하고 싶은거라면 주황색으로 표시한 list부분만을 useSelector(MasterStopCodeSelector.list) 이런식으로 써서 사용할 수도 있다. 그러나 편의성을 위해 all 안에 넣어두고 사용하고싶은 Selector를 불러오는 개념인거 같다.
우선 빨간색으로 표시된 all은 selectAllState에서 값을 받아오게되는데 selectAllState를 보면
state을 업데이트해주는 select~함수들을 모두 담고있다. 이중에 우리는 list를 업데이트시켜주는 selectMasterStopCodeList 함수를 찾아서 사용했던 것이다.
여기 주의할 점은 순서이다. 나는 정말 이 부분때문에 애먹은 경험이 있다... 항상 별거 아닌 오류가 제일 오래걸린다...
빨간색으로 표시한 list들을 보면 뒤에서 두번째로 모두 같은 위치에 있는걸 확인할 수 있다. 이 순서가 어긎난다면 제대로 작동하지 않는다.
우리는 조회 이벤트를 통해 slice, saga의 동작 흐름을 살펴보았습니다. 잘못된 점이 있다면 언제든 채찍질은 환영입니다.
'React > Redux (Toolkit + Saga)' 카테고리의 다른 글
| Redux Toolkit + Redux Saga 구조 만들어보기(2) (0) | 2021.03.19 |
|---|---|
| Redux Toolkit + Redux Saga 구조 만들어보기(1) - 개념, 설치 (0) | 2021.03.18 |
