使用connected-react-router使router与store同步

connected-react-router是一个绑定react-router到redux的组件，来实现双向绑定router的数据到redux store中，这么做的好处就是让应用更Redux化，可以在action中实现对路由的操作。

这个组件的关键就在于使用了react-router中的一个关键组件，也就是ReactTraining/history，这个组件看了下文档，作者是这么解释的

The history library is a lightweight layer over browsers' built-in History and Location APIs. The goal is not to provide a full implementation of these APIs, but rather to make it easy for users to opt-in to different methods of navigation.

按照我的理解应该是对浏览器原本的history对象做了一定的增强，同时应该对ReactNative等环境做了一定的polyfill。

使用connected-react-router这个库的关键点就在于创建合适的history对象

 

我当前connected-react-router的版本为v6，需要react router大于v4，并且react-redux大于v6，react大于v16.4.0

 

 先看index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import configureStore, { history } from './configureStore'
import { ConnectedRouter } from 'connected-react-router'
import routes from './routes'

const store = configureStore()

ReactDOM.render(
    <Provider store={store}>// Provider使用context将store传给子组件
        <ConnectedRouter history={history}>//ConnectedRouter传递history对象作为props
            { routes }
        </ConnectedRouter>
    </Provider>
  , document.getElementById('root'));

configureStore.js提供history与store

 

import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createRootReducer from './reducers'


export const history = createBrowserHistory()







export default function configureStore(preloadedState) {
  const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || 
  compose
  
  const store = createStore(
    createRootReducer(history),
    preloadedState,
    composeEnhancer(
      applyMiddleware(
        routerMiddleware(history),
      ),
    ),
  )
  return store
}

 使用createBrowserHistory()创建history。

const history = createBrowserHistory()

使用redux-devtools-extension

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

reducers/index.js

import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'
import counterReducer from './counter'

const rootReducer = (history) => combineReducers({
  count: counterReducer,
  router: connectRouter(history)
})

export default rootReducer

combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer

reducers/counter.js

const counterReducer = (state = 0, action) => {
    switch (action.type) {
      case 'INCREMENT':
        return state + 1
      case 'DECREMENT':
        return state - 1
      default:
        return state
    }
  }
  
  export default counterReducer  

routes/index.js

import React from 'react'
import { Route, Switch } from 'react-router'
import Counter from '../components/Counter'
import { Link } from 'react-router-dom'


const routes = (
  <div>
    <div>
        <Link to="/">Home</Link> 
        <Link to="/hello">Hello</Link> 
        <Link to="/counter">Counter</Link>
    </div>
    <Switch>
      <Route exact path="/" ><div>Home</div></Route>
      <Route path="/hello" ><div>Hello</div></Route>
      <Route path="/counter" component={Counter} />
      <Route ><div>No Match</div></Route>
    </Switch>
  </div>
)







export default routes

components/Counter.js

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { increment, decrement } from '../actions/counter'

const Counter = (props) => (
  <div>
    Counter: {props.count}
    <button onClick={props.increment}>+</button>
    <button onClick={props.decrement}>-</button>
  </div>
)

Counter.propTypes = {
  count: PropTypes.number,
  increment: PropTypes.func.isRequired,
  decrement: PropTypes.func.isRequired,
}

const mapStateToProps = state => ({
  count: state.count,
})

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement()),
})

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

actions/counter.js

export const increment = () => ({
  type: 'INCREMENT',
})

export const decrement = () => ({
  type: 'DECREMENT',
})