How to use redux-first-router - 10 common examples

const configureStore = (initialState = {}, initialEntries = []) => {
  const router = connectRoutes(routesMap, {
    ...routerOptions,
    initialDispatch: false,
    initialEntries,
  })
  const sagaMiddleware = createSagaMiddleware({
    onError:
      process.env.NODE_ENV == 'production'
        ? e => Sentry.captureException(e)
        : console.error,
  })
  const warez = [sagaMiddleware, router.middleware]
  // if (process.env.NODE_ENV == 'development') warez.push(logger)

  const middlewares = compose(
    router.enhancer,
    applyMiddleware(...warez),

export const MAP = 'location/MAP';
export const COUNTRY = 'location/COUNTRY';

const routeChangeThunk = (dispatch, getState) => {
  // track page with GA
  handlePageTrack(getState().location);
};

export const routes = {
  [MAP]: {
    path: '/v2/map/:tab?/:country?/:region?/:subRegion?'
  }
};

export default connectRoutes(history, routes, {
  querySerializer: {
    parse: decodeUrlForState,
    stringify: encodeStateForUrl
  },
  onAfterChange: routeChangeThunk
});

export const MAP = 'location/MAP';

const routeChangeThunk = (dispatch, getState) => {
  // track page with GA
  handlePageTrack(getState().location);
};

export const routes = {
  [MAP]: {
    path:
      '/map/:zoom?/:latitude?/:longitude?/:iso?/:basemap?/:layers?/:sublayers?'
  }
};

export default connectRoutes(history, routes, {
  querySerializer: queryString,
  onAfterChange: routeChangeThunk
});

export function createReduxRouter(routes, path = null, config = {}) {
  // match initial route to express path
  if (path) {
    config.initialEntries = [ path ]
  }

  config.querySerializer = queryString

  return connectRoutes(routes, config)
}

import { createStore, combineReducers, applyMiddleware, compose } from "redux"
import { Provider } from "react-redux"
import { configure, addDecorator } from "@storybook/react"
import { withKnobs } from "@storybook/addon-knobs"
import { connectRoutes } from "redux-first-router"
import { IntlProvider } from "react-intl"
import "edge-style"

import "../src/Application.css"
import State from "../src/State"

import "./Overwrite.css"

const routes = State.getRoutes()

const { reducer, middleware, enhancer } = connectRoutes(routes)

const enhancers = compose(enhancer, applyMiddleware(middleware))
const reducers = combineReducers({ location: reducer, ...State.getReducers() })
const store = createStore(reducers, {}, enhancers)

// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
addDecorator(withKnobs)

addDecorator((story) => {
  return (
    
      
        {story()}

const configureStore = (initialState = {}, initialEntries = []) => {
  const router = connectRoutes(routesMap, {
    ...routerOptions,
    initialEntries,
  })
  const sagaMiddleware = createSagaMiddleware()
  const middlewares = compose(
    router.enhancer,
    applyMiddleware(router.middleware, sagaMiddleware),
  )
  const rootReducer = combineReducers({ location: router.reducer, ...reducers })
  const store = createStore(rootReducer, initialState, middlewares)
  // If running this on the express server, don't start saga middleware
  if (process.env.TARGET == 'server') return store
  let sagaTask = sagaMiddleware.run(rootSaga) // start sagas
  if (module.hot) {
    // Hot module replacement for reducer
    module.hot.accept('./reducer.js', () => {

// @ts-ignore
import { createHashHistory } from 'rudy-history';
import { combineReducers, applyMiddleware, compose as reduxCompose, createStore, Store } from 'redux';
import ReduxThunk from 'redux-thunk';
import { Provider } from 'react-redux';
import DbManager from './db/manager';
import { restoreLocation, startPersistingLocation } from './util/standalone';
import appReducer from './redux/reducer';
import App from './app';
import routes from './routes';
import * as serviceWorker from './serviceWorker';
import './index.css';

restoreLocation();

const router: any = connectRoutes(routes, {
  createHistory: createHashHistory
});

startPersistingLocation(router.history);

const rootReducer = combineReducers({location: router.reducer, app: appReducer});
export type AllState = ReturnType & {location: LocationState};

export interface Services {
  dbManager: DbManager;
}
const dbManager = new DbManager();
const thunkMiddleware = ReduxThunk.withExtraArgument({
  dbManager
});
const middlewares = applyMiddleware(thunkMiddleware, router.middleware);

const reduxSetup = () => {
        // setup routes
        const routesMap = {
            DUMMY: '/dummyModel',
        };
        const connectedRoutes = connectRoutes(routesMap, {
            createHistory,
            querySerializer: queryString,
            initialEntries: ['/dummyModel'],
        });

        // setup actions
        const actionTypes = {
            order: {
                SET: 'DUMMY_MODEL_ORDER',
            },
        };

        const actions = {
            order: {set: createAction(actionTypes.order.SET)},
        };

export const configureStore = (history, preloadedState) => {
  const { reducer, middleware, enhancer, initialDispatch } = connectRoutes(history, routesMap, {
    querySerializer: queryString,
    onBeforeChange: onBeforeRouteChange,
    initialDispatch: false,
  });

  const rootReducer = combineReducers({ ...reducers, location: reducer });
  const saga = createSagaMiddleware();
  const middlewares = applyMiddleware(saga, middleware);
  const enhancers = composeEnhancers(enhancer, middlewares);
  const store = createStore(rootReducer, preloadedState, enhancers);

  initAuthInterceptor(store);

  if (module.hot && process.env.NODE_ENV === 'development') {
    module.hot.accept('./reducers', () => {
      const reducers2 = require('./reducers'); // eslint-disable-line global-require

const configureStore = (history, initialState) => {
    const {
        reducer, middleware, enhancer, thunk, initialDispatch
    } = connectRoutes(history, routesMap, {
        initialDispatch: false,
        ...options,
    }); // yes, 5 redux aspects

    const enhancers = [
        // create the saga middleware
        applyMiddleware(sagaMiddleware, middleware),
    ];

    const reducers = {...rootReducer, location: reducer};
    const store = createInjectSagasStore(
        {rootSaga}, reducers, initialState, compose(enhancer, ...enhancers)
    );
    initialDispatch();

    return {store, thunk};