[TIL] react-router-dom v6에서 리덕스 연결시 navigate 사용하기

프로젝트 규모가 작아 전까지는 크게 리덕스와 같은 전역상태관리 툴을 상요할 필요가 없었는데 필요한 데이터가 많아지다보니 상태관리를 효율적으로 할 필요가 있어 리덕스를 도입하게 되었다.

하지만 예전에 사용했던 것과 달리 react-router-dom 버전이 업그레이드 되면서 redux를 사용하며 history를 사용할 수 있게 해주었던 connect-react-router 연결이 어려워졌다. connected-react-router 를 깔아 아무리 적용하려고 해도 계속해서 에러가 나서 다시 npm 문서를 확인해봤다.

원인은 connect-react-router은 react-router v4, v5에서만 지원하기 때문에 그랬던 것.

 

connected-react-router

 

 

또한 react-router-dom v5 에서는 useHistory를 사용해서 페이지를 이동시켰다면 react-router-dom v6에서는 useNavigate를 사용해서 페이지를 이동시킨다. 그래서 리덕스에서도 navigate를 사용하기 위해 어떤 방법을 사용할 수 있을지 엄청 고민했다.

History vs Navigate

- react-router-dom v5 : useHistory
- react-router-dom v5 : useNavigate

React-router-dom v6에러 리덕스 사용

리덕스를 사용하며 connected-react-router에서 발생하는 에러를 만났다면 dispatch를 통해 navigate를 미들웨어 파라미터로 넘겨보자. 미들웨어로 navigate를 넘겼을 때, 미들웨어쪽에서 어떻게 활용할 수 있는지도 확인해봤다.

// Main.js

import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux'
import { actionCreators as action } from "#stores/modules/main";

const Main = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  useEffect(() => {
    dispatch(action.getDataAC(() => { navigate('/hello')}))
  }, [])

  return (  )
}

export default Main

// redux middlewares
const getDataAC = (navigate) => {
  return function (dispatch, getState) {
    axios.get(process.env.REACT_APP_SEVER_URL + `/seminars`,
    )
      .then((res) => {
        console.log(res)
        dispatch(getData(res.data))
        navigate()
      })
      .catch(error => {
        console.log("error", error)
      })
  }
}

회고

이렇게 navigate를 파라미터로 넘겨 미들웨어에서 사용할 수 있도록 해서 구현했는데 이보다더 좋은 방법이 있는지 계속해서 찾고 있는 중이다. 오랜만에 리덕스를 다시 써보면서 예상치 못한 버전 에러를 경험하게 되었는데 발생한 문제를 다른 방법으로 해결할 수 있어 다행이었다. 가장 첫번째로 찾은 방법이었지만 또 다른 방법이 있는지도 궁금하다.