이전 페이지 url history 남기기 (redux-toolkit)

혜진 조·2022년 12월 27일
0

리액트

목록 보기
20/31
post-custom-banner

react-router-dom version6 부터 useHistory가 제공되지 않는다.
개발을 하면서 직전에 방문한 url에 대한 history를 알아야 하는 상황이 존재해서
이 부분을 어떻게 처리해야하나 고민이 있었다.
예를 들어 로그인 페이지의 경우, 사용자가 직접 로그인 버튼을 눌러 페이지에 접근하는 경우도 있겠지만
로그인을 하지 않은 상태에서 상품상세페이지에 진입해 회원만 클릭할 수 있는 찜 버튼을 눌러 자동으로 로그인 페이지로 리턴되는 경우,
리프레시 토큰이 만료되어 자동으로 로그인 페이지로 리턴된 경우,
휴면상태해제를 위해 휴대폰본인인증(외부 모듈)을 완료한 후 로그인 페이지로 리턴되는 경우,
sns에서 공유된 링크를 통해 접속한 경우 등 여러가지 상황이 존재하는데
일률적으로 navigate(-1)을 사용하다보면, 적절하지 않은 페이지로 접근하거나 자사 페이지에서 벗어나게 되는 경우가 발생한다.

현재 프로젝트에서 redux-toolkit을 사용해 Client State Management를 하고 있어서,
이를 사용해 직전에 방문한 url과 현재 방문한 url의 주소를 남기도록 만들었다.

//userSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  isLoggedIn: false,
  userId: null,
  navigationPath: {
    to: "",
    from: "",
  },
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    logIn(state, action) {
      state.isLoggedIn = true;
      state.userId = action.payload;
    },
    logOut(state) {
      state.isLoggedIn = false;
    },
    updateNavigationPath(state, action) {
      state.navigationPath = action.payload;
    },
    resetNavigationPath(state) {
      state.navigationPath = {
        to: "",
        from: "",
      };
    },
  },
  extraReducers: {},
});

export default userSlice;
export const { logOut, logIn, updateNavigationPath, resetNavigationPath } = userSlice.actions;
//index.tsx

function GeneralFC(){
  const { pathname } = useLocation()
  const dispatch = useDispatch();
  const navigationPath = useSelector(
    (state) => state.user.navigationPath
  );
  
   useEffect(() => {

    dispatch(updateNavigationPath({ from: navigationPath?.to, to: pathname }));
     
  }, [pathname, dispatch]);
  
  return null;
}
...

profile
나를 믿고 한 걸음 한 걸음 내딛기! 🍏
post-custom-banner

0개의 댓글