TypeScript react-router-redux.routerMiddleware函數代碼示例

export function configureStore(history, initialState?: IStore): Redux.Store<IStore> {

  const middlewares: Redux.Middleware[] = [
    routerMiddleware(history),
    thunk,
  ];

  /** Add Only Dev. Middlewares */
  if (appConfig.env !== 'production' && process.env.BROWSER) {
    const logger = createLogger();
    middlewares.push(logger);
  }

  const composeEnhancers = (appConfig.env !== 'production' &&
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

  const store = createStore(rootReducer, initialState, composeEnhancers(
    applyMiddleware(...middlewares),
  ));

  if (appConfig.env === 'development' && (module as any).hot) {
    (module as any).hot.accept('./reducers', () => {
      store.replaceReducer((require('./reducers')));
    });
  }

  return store;
}

export default (initialState = {}, history) => {

  const middleware: any = [reduxObservable(), routerMiddleware(history)];

  const enhancers = [];
  if (__DEVTOOLS__) {
    const devToolsExtension = window.devToolsExtension;
    if (typeof devToolsExtension === 'function') {
      enhancers.push(devToolsExtension());
    }
  }

  const store: any = createStore(
    reducers(),
    initialState,
    compose(
      applyMiddleware(...middleware),
      ...enhancers
    )
  );
  store.asyncReducers = {};


  return store;
};

export default function configureStore(initialState?: Store.ApplicationState) {
  // Build middleware. These are functions that can process the actions before they reach the store.
  const thunk = (thunkModule as any).default; // Workaround for TypeScript not importing thunk module as expected
  const windowIfDefined = typeof window === 'undefined' ? null : window as any;
  const devToolsExtension = windowIfDefined && windowIfDefined.devToolsExtension; // If devTools is installed, connect to it
  const createStoreWithMiddleware = compose(
    applyMiddleware(routerMiddleware(browserHistory), thunk, typedToPlain),
    devToolsExtension ? devToolsExtension() : f => f
  )(createStore);


  // Combine all reducers and instantiate the app-wide store instance
  const allReducers = buildRootReducer(Store.reducers);
  const store = createStoreWithMiddleware(allReducers, initialState) as Redux.Store;

  // Enable Webpack hot module replacement for reducers
  if (module.hot) {
    module.hot.accept('./store', () => {
      const nextRootReducer = require<typeof Store>('./store');
      store.replaceReducer(buildRootReducer(nextRootReducer.reducers));
    });
  }

  return store;
}

function configureStore(initialState = {}, history) {
  const store = compose(
    __DEV__
      ? applyMiddleware(routerMiddleware(history), logger)
      : applyMiddleware(routerMiddleware(history))
  )(createStore)(rootReducer, initialState);

  if (module.hot) {
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers');
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

export function createAdminUIStore() {
  const sagaMiddleware = createSagaMiddleware();

  const s: Store<AdminUIState> = createStore(
    combineReducers<AdminUIState>({
      cachedData: apiReducersReducer,
      hover: hoverReducer,
      localSettings: localSettingsReducer,
      metrics: metricsReducer,
      queryManager: queryManagerReducer,
      routing: routerReducer,
      timewindow: timeWindowReducer,
      uiData: uiDataReducer,
      login: loginReducer,
    }),
    compose(
      applyMiddleware(thunk, sagaMiddleware, routerMiddleware(hashHistory)),
      // Support for redux dev tools
      // https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
      (window as any).devToolsExtension ? (window as any).devToolsExtension({
        // TODO(maxlang): implement {,de}serializeAction.
        // TODO(maxlang): implement deserializeState.
        serializeState: (_key: string, value: any): Object => {
          if (value && value.toRaw) {
            return value.toRaw();
          }
          return value;
        },
      }) : _.identity,
    ) as GenericStoreEnhancer,
  );

  sagaMiddleware.run(queryMetricsSaga);
  return s;
}

export function configureStore(preloadedState?: IApplicationState): SagaEnhancedStore<IApplicationState> {
  const sagaMiddleware = createSagaMiddleware()

  const middlewares = [
    routerMiddleware(browserHistory),
    sagaMiddleware,
  ]

  const store = createStore<IApplicationState | undefined>(
    rootReducer,
    preloadedState,
    compose<any, any>(
      applyMiddleware(...middlewares),
      devTools(),
    ),
  ) as SagaEnhancedStore<IApplicationState>

  sagaMiddleware.run(rootSaga)

  store.runSaga = sagaMiddleware.run
  store.close = () => store.dispatch(END)

  // Hot reload reducers:
  // https://github.com/reactjs/react-redux/releases/tag/v2.0.0
  /* tslint:disable:no-string-literal */
  if (process.env.NODE_ENV === "development" && module["hot"]) {
    module["hot"].accept("./reducers", () => {
      const nextRootReducer = require("./reducers").default
      store.replaceReducer(nextRootReducer)
    })
  }
  /* tslint:enable:no-string-literal */

  return store
}

/*
 * @param {Object} initial state to bootstrap our stores with for server-side rendering
 * @param {History Object} a history object. We use `createMemoryHistory` for server-side rendering,
 *                          while using browserHistory for client-side
 *                          rendering.
 */
export default function configureStore(initialState, history) {
  let middleware = [ thunk, promiseMiddleware ];
  // Installs hooks that always keep react-router and redux
  // store in sync
  const reactRouterReduxMiddleware = routerMiddleware(history);
  if (__DEV__) {
    middleware.push(reactRouterReduxMiddleware, createLogger());
  } else {
    middleware.push(reactRouterReduxMiddleware);
  }

  const finalCreateStore = applyMiddleware(...middleware)(createStore);

  const store = finalCreateStore(rootReducer, initialState);

  if ((module as any).hot) {
    // Enable Webpack hot module replacement for reducers
    (module as any).hot.accept('reducers', () => {
      const nextReducer = require('reducers');
      store.replaceReducer(nextReducer);
    });
  }

  return store;
}

export function configureStore(history, initialState?: any): Redux.Store {

  let middlewares: any[] = [
    routerMiddleware(history),
    thunk
  ];

  /** Add Only Dev. Middlewares */
  if (appConfig.env !== 'production' && process.env.BROWSER) {
    const logger = createLogger();
    middlewares.push(logger);
  }

  const enhancer = compose(
    applyMiddleware(...middlewares),
    appConfig.env === 'development' &&
    typeof window === 'object' &&
    typeof window.devToolsExtension !== 'undefined'
      ? window.devToolsExtension() : f => f
  );

  const store: Redux.Store = createStore(rootReducer, initialState, enhancer);

  if (appConfig.env === 'development' && (module as any).hot) {
    (module as any).hot.accept('./reducers', () => {
      store.replaceReducer((require('./reducers')));
    });
  }

  return store;
}

export default function configureStore(preloadedState): Redux.Store {
  const store = createStore(
    rootReducer,
    preloadedState,
    compose(
      applyMiddleware(thunk),
      applyMiddleware(routerMiddleware(hashHistory))
    )
  );
  return store;
}

export default function configureStore(initialState = {}, history) {
  // Middleware you want to use in production:
  const enhancer = applyMiddleware(
    routerMiddleware(history),
    createSagaMiddleware()
  );

  // Note: only Redux >= 3.1.0 supports passing enhancer as third argument.
  // See https://github.com/rackt/redux/releases/tag/v3.1.0
  const reducer = createReducer();
  return createStore(reducer, initialState, enhancer);
};