페이스북 로그인 리덕스와 연결하기

페이스북 로그인 기능을 생성했다면, 리덕스와 연결하여 로그인 후 유저 로그인 상태를 변환 시켜서 

서비스에 지장이 없도록 만들어야 한다.

일단 리덕스 설정파일을 수정한다.

페이스북 로그인과 연결되는 액션을 생성

# redux/modules/user.js

function facebookLogin(access_token){    // 액션은 access_token(jwt)를 인자로 받는다
    return function(dispatch) {        fetch('/users/login/facebook/', {    // fetch를 통해서 api 서버에 요청
            method: 'POST',            headers: {                'Content-Type': 'application/json',            },            body: JSON.stringify({                access_token,            }),        })            .then(response => response.json())            .then(json => console.log(json))            .catch(err => console.log(err));    };}

// 생성한 액션을 내보낸다(export)


const actionCreators = {

    facebookLogin

};


export { actionCreators };

생성한 액션을 사용하고자 하는 컴포넌트의 index 파일에서 임포트한다.

# LoginForm / SignupForm 컴포넌트의 index.js

import { actionCreators as userActions } from "redux/modules/user";

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        facebookLogin: (access_token) => {
            dispatch(userActions.facebookLogin(access_token));
        }
    }
}

export default connect(null, mapDispatchToProps)(Container);

connect를 통해서 리덕스의 액션이 컴포넌트와 연결되면, 그 컴포넌트에 props로 전달이 된다.

# container.js

static propTypes = {    facebookLogin: PropTypes.func.isRequired,};
_handleFacebookLogin = response => {    const { facebookLogin } = this.props;    facebookLogin(response.accessToken);};

presenter에서 react-facebook-login을 통해서 페이스북 로그인 기능을 구현했고,

이를 통해서 로그인 후 accessToken을 받아오는 것을 확인했었다.

이 accessToken을 리덕스 facebookLogin 액션의 인자 access_token으로 보내서 기능을 구현.

이렇게 페이스북 로그인과 리덕스를 연결하였다.

연결은 되었지만 받아온 accessToken(JWT)를 어딘가에 저장을 해야만 로그인 상태를 관리 할 수 있다.

토큰이 있어도 state가 변하지 않으면 소용이없고, state를 변경시키는 방법은 액션을 디스패치 하는 것 뿐이다.

그래서 로그인을 한 후에 유저가 로그인 했다고 상태를 변경하기 위해서 액션을 생성한다.

// actions
const SAVE_TOKEN = "SAVE_TOKEN";

// action creators
function saveToken(token){
    return{
        type:SAVE_TOKEN,
        token
    }
}

// reducer

function reducer(state = initialState, action){
    switch(action.type){
        case SAVE_TOKEN:
            return applySetToken(state,action)
        default:
            return state;
    }
};

// reducer functions

function applySetToken(state,action){
    const {token} = action;
    return{
        ...state,
        isLoggedIn: true,
        token
    }
}

액션과 액션이 부르는 리듀서를 생성한 후에 아까 생성했던 페이스북 로그인 api액션에서,

응답을 성공적으로 받아왔을 때 콘솔창에 출력하던 것을 다음과 같이 바꿔준다.

.then(json => {
    if(json.token){
    localStorage.setItem("jwt", json.token);
    dispatch(saveToken(json.token));
    }
})

이렇게 되면 페이스북 로그인 버튼을 눌러서 api가 실행되고, 성공적으로 응답을 받아왔을 경우

응답에 들어있는 jwt를 로컬스토리지에 저장함과 동시에 saveToken액션을 디스패치 한다.

액션이 디스패치 되면 리듀서가 실행되고, 리듀서는 해당 액션에 맞는 동작을 취함으로써

isLoggedIn 상태를 변경시킨다. isLoggedIn 상태가 변경되면 출력되는 컴포넌트도 변경된다.

이런 방식으로 로그인 기능을 구현 할 수 있다.