React Router - Redux와 동기화

Router를 Redux와 함께 사용하기 위해서는 동기화를 해야한다.

필요한 라이브러리를 설치

#> yarn add react-router-dom react-router-redux@next history

react-router-redux 는 @next를  통해서 버전 5를 받아야 connectedRouter 사용시 에러가 발생하지 않는다

Redux Store 설정파일에 Router 설정 추가

import { routerReducer, routerMiddleware } from "react-router-redux";
import createHistory from "history/createBrowserHistory";

히스토리 생성

const history = createHistory();

히스토리란? 어플리케이션 안에서 어떤 네비게이션 스탭을 밟았는지에 대한 정보를 가진 객체

라우트 미들웨어 등록

const middlewares = [thunk, routerMiddleware(history)]

라우트 미들웨어를 등록하는데 생성한 히스토리 객체를 전달한다.

히스토리와 동기화가 되어야 미들웨어와 라우터가 연결되어서 같은 히스토리를 가지고 동작을 할 수 있다.

라우터 리듀스 추가

const reducer = combineReducers({
    users,
    routing: routerReducer
})

히스토리 export

export { history };

히스토리를 내보내 줘야 다른 곳에서도 같은 히스토리를 사용 할 수 있다.

라우터 사용

import { ConnectedRouter } from 'react-router-redux';
import store, {history} from 'redux/configureStore';



ReactDOM.render(

    <Provider store={store}>

        <ConnectedRouter history={history}>

            <App /> 

        </ConnectedRouter>

    </Provider>,

    document.getElementById('root')

);

ConnectedRouter를 사용하고 리덕스 스토어에서 히스토리를 가져와서 히스토리 인자로 전달한다.

이렇게 작성하고 앱이 실행되는지 확인해 보면

다음과 같이 라우터가 리덕스와 동기화 된 것을 Redux-logger를 통해서 확인 할 수 있다.