state 관리 - 뽀개기

생각보다 어렵다. 많이..이것저것 그냥 하다보면서 얻어 걸려서 진행하고 있지만 사실 

deep한 이해가 있어야 한다... 모든 딥해야지..딥딥!

 

f(values.email && values.code){
                /// 서브 밋 !!
                loginAction(values).then(resultData => {
                    const token = resultData as Oauth2Token
                    if(token.access_token){
                        tokenSet(token.access_token, token.refresh_token)
                        dispatch(fetchUserInfo( {'type':'token', 'targetID': token.access_token}))
                        navigate( "/",{ replace: true })
                    }else{
                        setProps( {...props, dialogOpen: true, content: 'ME10006'})
                    }
                });
            }

 

메일과 메일에 발송된 코드를 통해 로그인을 한다.

토큰정보를 리턴해주고 정상적이라면 토큰을 쿠키 저장한다.

그리고 토큰을 통해 사용자 정보를 조회하고 리덕스 dispatch한다.

그리고 메인Page로 navigate 한다.

 

 

But!!! dispatch한 사용자 메일 정보가.. 아직도.. dispatch가 안되서.. 다시 로그인 페이지로...띠용!!! 무량 대수 만큼 콘솔로그 찍으면서 한 듯하다... 얻어 걸러야 하는데?.. 근본적인 이해를 좀 더 해볼까?..

if(!cookie.get('access_token') || user.loginInfo.email == ''){
        navigate( "/login",{replace: true })
}

 

진짜. 어려운 한수다..

 

랜더링되는 이유를 다시 한번 생각해보자.

 

1.state 변경 될 때..

2.리덕스 상태 변경 될 때...

 

변경되는 즉시 랜더링되지 않는다!!! 또한 비동기 형태이다. 따라서  dispatch를 했다해도. 메인페이지 auth를 체크할 때 해당 값이 바인딩 되지 않았다는 것이다..!!!

 

그럼..? HOW??!!!   email 값이 바인딩(변경) 될 때 다시 한번 렌더링 하면 되겠다!!..!! 이 한수가 어려웠다...

useEffect( ()=> {
        authCheck()
}, [user.loginInfo.email])

앞선 게시글에도 언급한 내용이다.

 

빈 배열로 넣으면 딱 한번!! 실행.  항목을 넣으면 해당 항목이 변경 될 때마다 랜더링

 

객체로 넣으면 어떻게 될까용!!.

 

그리고 앞서서 한번 언급했지만 다시 한번 이야기하자면 state는 한방에 관리하자..

 

setMenu( ...)

setID( ...)                                ==>   setProps ({ ...})

setList( ...)

 

 

 

아 ...근데 URL Path를 치고 들어오면.......리덕스 내용이 없는디??ㅋㅋ??ㅋㅋ?? ㅋㅋ