connected-react-routerを使ってhandlerでルーティングをしよう！

Reactjsでの開発では、
reactとreduxを一緒に使うことが多いと思います。

routingは、react-router-domというライブラリを使うのが簡単ですが、一緒に
connected-react-routerで、routingも一緒にstoreで管理するのがいいと思います。
react-router-reduxは、公式でdeprecatedになっているのでこちらを使うのが良いでしょう。

redux-thunkも必要みたいです。

link以外の画面推移方法が英語しかなかったので、記録のために

pushを使って、onClickなどのhandlerでroutingをできるようにします。

#shell
yarn add react-router-dom react-redux redux connected-react-router

action等はとりあえず省略します。
##index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from "redux"
import { Provider } from "react-redux"
import thunk from "redux-thunk"
import { createBrowserHistory } from "history"
import { routerMiddleware, ConnectedRouter } from 'connected-react-router'
import { Switch } from "react-router-dom"
import rootReducers from "./reducers"

const history = createBrowserHistory()

const store = createStore(
  rootReducers(history),
  applyMiddleware(
    thunk,
    routerMiddleware(history),
  )
)

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <App />
      </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

##reducer.js

import { combineReducers } from "redux"
import { connectRouter } from 'connected-react-router'

export default history => combineReducers({
  router: connectRouter(history),
  //.....ここに他のreducerを
})

##App.jsx

connected-react-routerのpushをdispatchしてルーティングするのが良いと思います

import React from 'react';
import { Route } from "react-router-dom"
import { connect } from "react-redux"
import { push } from "connected-react-router"

const App = () => {
  return(
  <React.Fragment>
    <Route path='/top' component={TopContainer} />
    <Route path='/second' component={Second} />
  </React.Fragment>
)}

const Top = props => (
  <button onClick={props.pushClicked}>button</button>
)
const Second = () => (
  <p>second page</p>
)

const mapDispatchToProps = {
  pushClicked: () => dispatch(push("/second")),
}
const TopContainer = connect(null, mapDispatchToProps)(Top)

動作確認をしていないので間違っていたら教えてください！
あと、わかんなかったら言ってください！