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

export function configureStore() {

    const store = finalCreateStore(rootReducer, initialState);

    history = syncHistoryWithStore(browserHistory, store);

    enableHotLoader(store);        

    return store;
}

/**
 * Creates the react-router-redux history object.
 */
export default function createHistory(store: Store): ReactRouterReduxHistory {
  const history = __TEST__ ? createMemoryHistory() : hashHistory;
  return syncHistoryWithStore(history, store);
}

import RepoReducer from 'js/reducer/RepoReducer'

const middleware: Middleware = routerMiddleware(browserHistory);
const devToolsExtension = (() => {
  const devTools: Function = (window as any).devToolsExtension;
  return devTools ? devTools() : f => f;
})();

const reducers = combineReducers({
  repos: RepoReducer,
  routing: routerReducer
});

const initialState = undefined;

export const store: Store = createStore(
  reducers,
  initialState,
  compose(applyMiddleware(middleware), devToolsExtension)
);

export const history: ReactRouterReduxHistory = syncHistoryWithStore(browserHistory, store);

history.listen(location => {
  console.log(location.pathname);
  // console.trace(location);
});

store.subscribe(() => {
  // console.trace(store.getState());
});

import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import store from '../store';

export default syncHistoryWithStore(browserHistory, store);

/// <reference types="redux" />
/// <reference types="react-router" />

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore, routerReducer, routerMiddleware, push, replace, go, goForward, goBack } from 'react-router-redux';

const reducer = combineReducers({ routing: routerReducer });

// Apply the middleware to the store
const middleware = routerMiddleware(browserHistory);
const store = createStore(
    reducer,
    applyMiddleware(middleware)
);

// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store);
history.listen(location => console.log(location) );
history.unsubscribe();

// Dispatch from anywhere like normal.
store.dispatch(push('/foo'));
store.dispatch(replace('/foo'));
store.dispatch(go(1));
store.dispatch(goForward());
store.dispatch(goBack());

import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory, hashHistory } from 'react-router';
import { store } from './store';

// Change here history type: hash vs browser. This way we can
// keep track of the selected type of history programmatically.
const selectedHistoryType = hashHistory;

export const isHashHistory = () => selectedHistoryType === hashHistory;
export const isBrownserHistory = () => selectedHistoryType === browserHistory;
export const history = syncHistoryWithStore(selectedHistoryType, store);

      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({
        serialize: {
          options: {
            function: (_key: string, value: any): Object => {
              if (value && value.toRaw) {
                return value.toRaw();
              }
              return value;
            },
          },
        },
      }) : _.identity,
    ) as GenericStoreEnhancer,
  );

  sagaMiddleware.run(queryMetricsSaga);
  return s;
}

export const store = createAdminUIStore();

// Connect react-router history with redux.
export const history = syncHistoryWithStore(hashHistory, store);