关于React-router和react-redux react-saga的使用融合使用

使用supportsHistory()方法判断：

  /**
   * 是否支持HTML5 history API
   *
   * @returns
   */
  supportsHistory() {
    const ua = window.navigator.userAgent;
    if (
      (ua.indexOf("Android 2.") > -1 || ua.indexOf("Android 4.0") > -1) &&
      ua.indexOf("Mobile Safari") > -1 &&
      ua.indexOf("Chrome") < 0 &&
      ua.indexOf("Windows Phone") < 0
    ) {
      return false;
    }
    return window.history && "pushState" in window.history;
  },

然后定义history时这么写，创建browser history对象，router和redux连接必须传递

const history = Tools.supportsHistory() ? createBrowserHistory() : createHashHistory();
/** 配置store */
const store = configureStore(history);

// configureStore.js
import { Store, createStore, applyMiddleware } from "redux";
// 引入redux-sage中间件来控制异步操作
import createSagaMiddleware from "redux-saga";
// `react-router-redux` 被放弃了, 所有这里我们使用 `connected-react-router`.
// 它提供了Redux中间件来连接 `react-router` 实例.
import { routerMiddleware } from "connected-react-router";
// 引入 redux-devtools-extension 可视化工具，请安装 Redux Devtools.
import { composeWithDevTools } from "redux-devtools-extension";
// 引入日志中间件记录日志
import { createLogger } from "redux-logger";
// 使用react-router需传递History类型
import { History } from "history";
// 导入顶级的state，以及组合后的reducer和sage
import { ApplicationState, rootReducer, rootSaga } from "./store/index";

/**
 * store配置， 联系action、reducer、saga
 * @param {History} history对象
 */
export default function configureStore(
  history: History,
): Store<ApplicationState> {
  // 创建devTools实例
  const composeEnhancers = composeWithDevTools({});
  // 创建redux-saga实例
  const sagaMiddleware = createSagaMiddleware();
  // 创建logger
  const logger = createLogger({
    predicate: () => !(process.env.REACT_APP_ENV === "pro"),
    collapsed: true,
  });

  // 创建store，传递组合后的reducer和saga，以及初始state
  const store = createStore(
    rootReducer(history),
    {},
    composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware, logger))
  );

  // 启动根saga
  sagaMiddleware.run(rootSaga);

  // 返回store
  return store;
}

组件内：

// app.tsx
return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <ConfigProvider {...config}>
          <div className="dock-tools">
            我是内容...
          </div>
        </ConfigProvider>
      </ConnectedRouter>
    </Provider>
  );
}