How to use connected-react-router - 10 common examples

const persistCallback = () => {
  console.log('rehydration completed')
}

const offlineConfig = {
  ...defaultConfig,
  persist,
  persistAutoRehydrate,
  persistOptions,
  persistCallback,
  offlineStateLens
}

// - Config and create store of redux
let store: redux.Store = redux.createStore(rootReducer(history), fromJS(initialState), redux.compose(
  redux.applyMiddleware(thunk, routerMiddleware(history), sagaMiddleware), offline(offlineConfig)
))

export default {store, runSaga: sagaMiddleware.run, close: () => store.dispatch(END), history}

const sharedStateCb = ({ dispatch, getState }) => {
  const state = getState();
  const syncEnabled = makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state);
  const emailVerified = selectUserVerifiedEmail(state);
  if (syncEnabled && emailVerified) {
    getSavedPassword().then(savedPassword => {
      dispatch(doGetSync(savedPassword));
    });
  }
};

const sharedStateMiddleware = buildSharedStateMiddleware(triggerSharedStateActions, sharedStateFilters, sharedStateCb);
const rootReducer = createRootReducer(history);
const persistedReducer = persistReducer(persistOptions, rootReducer);
const bulkThunk = createBulkThunkMiddleware();
const middleware = [sharedStateMiddleware, routerMiddleware(history), thunk, bulkThunk];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  enableBatching(persistedReducer),
  {}, // initial state
  composeEnhancers(applyMiddleware(...middleware))
);

const persistor = persistStore(store);
window.persistor = persistor;

export { store, persistor, history, whiteListedReducers };

import rootSaga from './sagas/combined';
import createSagaMiddleware from 'redux-saga';
const sagaMiddleware = createSagaMiddleware();

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

import * as actions from './constants';

import { createBrowserHistory } from 'history'
import { routerMiddleware, ConnectedRouter } from 'connected-react-router';
import { Route, Switch } from 'react-router'
const history = createBrowserHistory();

// then run the saga
const store = createStore(createRouteReducers(history), composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware)));
sagaMiddleware.run(rootSaga);
export const action = type => store.dispatch({ type });
action(actions.INITALIZE_APPLICATION);

import AppContainer from './containers/App';
import Error from './components/Error';

render(
  
    
      <div>
        
      </div>

function configureStore(initialState?: {}) {
	// configure middlewares
	const middlewares = [thunk, promise(), routerMiddleware(history)];
	// compose enhancers
	const enhancer = composeEnhancers(applyMiddleware(...middlewares));
	// create store
	return createStore(connectRouter(history)(rootReducer), persistedState || initialState!, enhancer);
}

const history = createHashHistory()
const middleware = [
  thunk,
  routerMiddleware(history) // for dispatching history actions
]

// check if app is being run in development mode. If so, enable redux-logger
if (process.env.NODE_ENV === 'development') {
  middleware.push(createLogger())
}

// set up the Redux store
const store = createStore(
  combineReducers({
    otp: createOtpReducer(otpConfig),
    router: connectRouter(history)
  }),
  compose(applyMiddleware(...middleware))
)

// define a simple responsive UI using Bootstrap and OTP-RR
class OtpRRExample extends Component {
  render () {
    /** desktop view **/
    const desktopView = (
      <div>
        
          
            
              <div style="{{">
                
              </div></div>

componentDidMount() {
    const { dispatch, location } = this.props;
    if (location.pathname === "/") {
      // auto redirect applications
      dispatch(replace("/applications"));
    } else {
      dispatch(replace("/404"));
    }
  }

// a form with branding
        let { uri } = yield call(apiStartSession, processInstanceId, formName);

        // we can't proxy html resources using create-react-app
        // so we have to use another server to serve our custom forms
        // this is only for the development
        uri = updateForDev(uri);

        window.location.replace(uri);
    } else {
        // regular form
        const path = {
            pathname: `/process/${processInstanceId}/form/${formName}/wizard`,
            search: `fullScreen=true&yieldFlow=${yieldFlow}`
        };
        yield put(replaceHistory(path));
    }
}

const { activeNamespaceName } = this.props;

    if (!window.location.search) {
      this.props.dispatch(push(`/applications/${activeNamespaceName}/components`));
    }

    if (prevState.subscribedPods.length !== this.state.subscribedPods.length || this.state.value !== prevState.value) {
      // save selected pods in query
      const search = {
        ...queryString.parse(window.location.search.replace("?", "")),
        pods: this.state.subscribedPods.length > 0 ? this.state.subscribedPods : undefined,
        active: !!this.state.value[0] ? this.state.value : undefined,
      };

      this.props.dispatch(
        replace({
          search: queryString.stringify(search),
        }),
      );
    }

    this.initFromQuery();
  }

): SagaGen {
  const { name, params } = action;
  const next = url(name, params);
  const {
    router: {
      location: { pathname: current },
    },
  } = getState();
  if (next == current) {
    // In several places in the code base, we use redirectTo() with the current path
    // to refresh the state of the page (eg. refresh list after record deletion from the list).
    // In latest versions of react-router, redirecting to the same URL does not reload the page.
    // Tackling the issue at its core will happen in Kinto/kinto-admin#272
    // In the mean time, let's trick the router by going to a fake URL and replacing it immediately.
    yield put(updatePath("/--fake--"));
    yield put(replacePath(next));
  } else {
    yield put(updatePath(next));
  }
}

.then((response) => {
      const { data } = response
      const {
        project_id: projectId,
        path
      } = data

      dispatch(updateSavedProject({
        name,
        path,
        projectId
      }))

      // If the URL didn't contain a projectId before, change the URL to a project URL
      if (search.indexOf('?projectId=') === -1) dispatch(replace(`${pathname}?projectId=${projectId}`))
    })
    .catch((error) => {