로그인한 유저 정보 저장(feat. payload)

0. 구현 목표

지금까지 구현한 로그인 기능은 로그인 성공 여부만 redux store에 저장하는 단계였다.

그러나 더 나아가 어떤 계정으로 로그인했는지, 로그인한 계정으로 어떤 상품들을 장바구니에 담았는지 알 수 있어야 한다.

1. authSlice.ts 수정

const authSlice = createSlice({
  name: 'auth',
  initialState: initialState,
  reducers: {
    login: (state, action) => {
      localStorage.setItem('isLogin', 'true');
      state.isLogin = true;
      state.user = action.payload; // 추가한 코드
    },
    logout: (state) => {
      localStorage.removeItem('isLogin');
      state.isLogin = false;
      state.user = {}; // 추가한 코드
    },
  },
});

이 단계에서 핵심은 payload를 함께 보내주는 것이다.

Action은 애플리케이션의 상태를 변화시키는 일종의 요청으로서, type과 payload 두 가지 주요 속성으로 구성되어있다.

이 때, payload는 액션과 함께 전달되는 추가 데이터 혹은 정보를 의미한다.

2. 로그인 성공 로직 코드 수정

// SignIn.tsx

if (checkInputId.pw === pw) {
  const loggedInUser = { ...checkInputId, cart: checkInputId.cart || [] }; // 추가한 코드
  
  setInputs({
    id: '',
    pw: '',
  });
  setErrors(initialErrors);
  
  dispatch(login(loggedInUser)); // 추가한 코드
  return navigate('/');
}

loggedInUser를 선언하여 id, pw와 함께 cart도 담아 dispatch 해준다.