connected-react-router

connected-react-router 这个库帮我们实现了在 中操作路由方法，并将路由变化的信息同步在 redux的store

安装

yarn add connected-react-router

第一步: 把 connectRouter( history ) 接入到 combineReducers()中间件里面。

把history 作为 rootReducer 的参数，最后返回 combineReducers( router:connectRouter( history ),...sagaReducer, ...thunkReducer )

 // @func: 此文件只接受两个`reducer`  1个是`sagaReducer`  1个是`thunkReducer`

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import { History } from 'history';
import sagaReducer from './saga/reducers';
import thunkReducer from './thunk/reducers';

const rootReducer = (history: History) => combineReducers({
  router: connectRouter(history),
  ...sagaReducer,
  ...thunkReducer,
});

export default rootReducer;

第二步 把 routerMiddleware（ history: History ）集成到 react-redux 的中间件里面。

import { createStore, applyMiddleware, compose } from 'redux';
import { routinePromiseWatcherSaga } from 'redux-saga-routines';
import createSagaMiddleware from 'redux-saga';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';
import thunk from 'redux-thunk';
// import logger from 'redux-logger';
import rootReducer from './reducer';
import rootSaga from './saga/sagas';

export const history = createBrowserHistory();
// saga 的中间件
const sagaMiddleware = createSagaMiddleware();
// 创建一个增强器函数

const composeEnhancer =
  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE_
    ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose;

const store = createStore(
  rootReducer( history ),
  composeEnhancer(
    applyMiddleware(
      routerMiddleware(history),
      sagaMiddleware,
      thunk,
      // logger,
  ),
));

sagaMiddleware.run(rootSaga);

sagaMiddleware.run(routinePromiseWatcherSaga);

export default store;

第三步 把 接入到入口文件里面。

import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4/v5
import { ConnectedRouter } from 'connected-react-router'
import configureStore, { history } from './configureStore'
...
const store = configureStore(/* provide initial state if any */)

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
      <> { /* your usual react-router v4/v5 routing */ }
        <Switch>
          <Route exact path="/" render={() => (<div>Match</div>)} />
          <Route render={() => (<div>Miss</div>)} />
        </Switch>
      </>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react-root')
)

index.js

...
import { Provider, ReactReduxContext } from 'react-redux'
...
      <Provider store={store} context={ReactReduxContext}>
        <App history={history} context={ReactReduxContext} />
      </Provider>
...

app.js

...
const App = ({ history, context }) => {
  return (
    <ConnectedRouter history={history} context={context}>
      { routes }
    </ConnectedRouter>
  )
}
...