Beomlog - user data calling: Redux-Saga

리덕스 사가를 이용해서 유저데이터를 콜 하기로 했다. 먼저 redux-saga를 yarn add로 설치해주고, index.tsx 에 미들웨어를 사용할 것임을 알려주자. 그리고 Modules/index.ts에 rootSaga를 만들어 run 해주자.

추후에 사가들을 넣어줄 것이다.

이제 user라는 상태를 만들어주자. user는 다음과 같이 되어있다.

GET_USERDATA를 하면, 사가에 userdata를 database에서 가져오라고 명령을 내린다. 이 명령이 끝나서 데이터가 들어오면 SET_USERDATA를 통해서 state에 userdata를 저장하는 방식이다. lib/asyncUtils.ts 라는 파일을 만들어 이를 관리해주도록 할텐데, 이 파일은 다음과 같이 작성되었다.

여기서 promiseCreator는 firebase api의 getUserDataFromDatabase 를 쓸것이다. 이는 다음과 같고,

이 명령을 받고 수행하여 data를 반환하면, SET_USERDATA에서 state에 이 data를 저장한다.

이제 가져온 userdata state을 컴포넌트에 넣어주자. 아 참고로 GET_USERDATA 액션은 로그인 할 때 처리되도록 만들었다.