Redux-toolkit Login Process

Today I Coded

react-native 에서 redux-tookit을 적용한 새로운 앱을 회사에서 개발중이다.
간단하게 비디오를 찍고, 비디오를 업로드 하고 비디오를 렌더를 해주면 되는 앱이다.
오늘은 전에 작성한 로그인, 가입 절차가 제대로 작동하지 않아서 여러가지로 시도를 하면서 dispatch와 useEffect를 이용하여 로그인 절차를 완성하였다.

기존 만들었던 앱은 redux를 활용하긴 했으나 동기적으로 사용하였고 login절차에서는 마지막에 async awiat으로 가져온 데이터를 redux에 dispatch만 해주었다.

그러나 이번에 redux-toolkit을 사용하면서 Thunk 미들웨어를 사용하게 되었고 dispatch는 비동기가 아닌 동기로 작동하기 때문에 login절차를 진행하려면 다른 접근이 필요했다.

처음에는 login절차를 기존에 만들었던 앱처럼 마지막에만 dispatch를 하는 식으로 다시 수정하려고 했다.

그러나 Thunk와 dispatch로 만들수 있을것 같아 다시 코드를 구현해 보았다.

const tokenUpdate = () => {
  dipatch(reduxTokenUpdate())
}

useEffect(()=> {
	if(user.token === undefined){
      navigation.navigate('Home')
    }
	},[user.token]
}
          
useEffect(() => {
  tokenUpdate()
  },[]
}

• 마지막에 있는 useEffect가 컴포넌트가 렌더 되면서 componentDidMount의 역할을 해준다.
• tokenUpdate함수가 실행 되면서 dispatch가 실행된다.
• dispatch가 실행되면 되면 state가 업데이트 되는데 state가 업데이트 되는것을 감시할 인자를 useEffect의 두번째 인자에 넣어둔다.
• useEffect에서 user.token의 상태가 업데이트가 된것을 확인하고 useEffect의 첫번째 인자에 있던 로직이 실행된다.

지금 만들고 있는 앱은 로그인, 가입 절차가 간단하여 ID, Password도 없기 때문에 저정도로만 코드를 구현 하였다.

추후에 다른 방법이 생각난다면 보완 할 예정이다.