关于将react-router 与 redux整合

why

react-router 与 redux的整合可以帮助我们实现：

• 将 router 的数据与 store 同步，并且从 store 访问
• 通过 dispatch actions 导航
• 在 redux devtools 中支持路由改变的时间旅行调试

how

1. 安装connected-react-router 和 history ：

npm install --save connected-react-router
npm install --save history

2. 配置 store ：

import thunk from 'redux-thunk'
import { createBrowserHistory } from 'history'

import { createStore, applyMiddleware } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'

import reducers from '../reducers'

export const history = createBrowserHistory();  // 浏览器端应用可以使用createBrowserHistory来创建history对象
const initialState = {}

const store = createStore(
 connectRouter(history)(reducers), // 使用connectRouter包裹 root reducer 并且提供我们创建的history对象，获得新的 root reducer
 initialState,
 applyMiddleware(thunk, routerMiddleware(history)) // 使用routerMiddleware(history)实现使用 dispatch history actions，这样就可以使用push('/path/to/somewhere')去改变路由（这里的 push 是来自 connected-react-router 的）
)

export default store

3. 配置根组件

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'

import App from './App'
import store from './redux/store'
import { history } from './redux/store'

render(
  <Provider store={store}> // 使用ConnectedRouter包裹路由，并且将 store 中创建的history对象引入，作为 props 传入应用
    <ConnectedRouter history={history}> //ConnectedRouter组件要作为Provider的子组件
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app')
)

4. 使用
   dispatch切换路由

import { push } from 'react-router-redux'
// Now you can dispatch navigation actions from anywhere!
store.dispatch(push('/about'))

可以看一个简单的例子

• 修改前：
  需要用formState标记表单状态，在组件render的时候判断表单状态，如果提交成功则返回上一页面，失败则仍在当前页面。

  
  修改前action.png
  修改前项目文件.png
  修改前项目文件.png
  修改前项目reducer.png

• 修改后
  成功回调的时候直接dispatch history，简洁了很多，有木有！！！

  
  修改后action.png
  修改后项目文件.png

最后：
尽管这一问题官方文档中给出的是使用 react-router-redux但是该仓库已经不再维护，因而这里采用connected-react-router 和 history将react-router 与 redux 进行深度整合。