![\"Edit](\"http://cdn.reactlandia.com/reactlandia-chat.png\")
\n\n\n\n\n ![\"Edit](\"https://codesandbox.io/static/img/play-codesandbox.svg\")
\n\n\n\n ![\"Edit](\"https://cdn.reactlandia.com/boilerplate.png?a=1\")
\n\n\n\n ![\"Edit](\"https://cdn.reactlandia.com/demo.png\")
\n\n\n> **UPDATE (8/15):** you can now add additional routes as part of your code splitting strategy. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/62#issuecomment-322558836) for more info.\n\n> **UPDATE (9/5):** you can now block user navigation via the `confirmLeave` route option (and customize its appearance via the `displayConfirmLeave` option). See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/27#issuecomment-327431413) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/6):** MUCH ANTICIPATED FEATURE: you can now do all sorts of optional params in your paths, match multiple similar paths to the same type, use regexes, and use params that capture multiple segments. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/83#issuecomment-327703226) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/9):** *4 new thiings:* 1) route paths are now cached for better performance (less cycles wasted on parsing). 2) you can now do **pathless routes!**. I.e. you can use routes just for the purpose of the thunk feature, thereby achieving more uniformity across your async actions--just use RFR! Just dispatch the action type for which you have a thunk in your `routesMap` and it will be called like any other. To learn more about it: [check this example](https://gist.github.com/faceyspacey/2771c05a62a338fa6d3d23d76e6e7c5a). 3) now all thunks and callbacks (`onBeforeChange`, `onAfterChange`, etc) receive a 3rd *\"bag\"* argument which currently has a key for the current `action` and an `extra` key. More keys may be added later. The `extra` key is an option you provide to `connectRoutes` which is the equivalent of Redux-Thunk's *\"extra argument\"*. It just happens to be in our bag. That said, `onBeforeChange` used to receive just an `action` as a 3rd argument. So unfortunately this is a breaking change. Check the aforementioned example to learn more about this too. 4) lastly, now RFR skips actions with an `error` key; this should resolve a few quirks for developers using middleware that explicitly handle errors already. If it ever makes sense for RFR/Rudy to handle errors, we'll provide a robust solution. Half-assing as we've done doesn't make sense for now.\n\n\n# Redux-First Router\n\n\n \n ![\"Version\"](\"https://img.shields.io/npm/v/redux-first-router.svg\")
\n \n\n \n ![\"Build](\"https://travis-ci.org/faceyspacey/redux-first-router.svg?branch=master\")
\n \n\n \n ![\"Coverage](\"https://lima.codeclimate.com/github/faceyspacey/redux-first-router/badges/coverage.svg\")
\n \n\n \n ![\"Green](\"https://badges.greenkeeper.io/faceyspacey/redux-first-router.svg\")
\n \n\n \n ![\"GPA\"](\"https://lima.codeclimate.com/github/faceyspacey/redux-first-router/badges/gpa.svg\")
\n \n\n \n ![\"Downloads\"](\"https://img.shields.io/npm/dt/redux-first-router.svg\")
\n \n \n \n ![\"Known](\"https://snyk.io/test/github/faceyspacey/redux-first-router/badge.svg\"){kind=icon}
\n \n\n \n ![\"License\"](\"https://img.shields.io/npm/l/redux-first-router.svg\")
\n \n
\n\n\n\n \n\n\n\n \n\n\n\n \n\n\n> **UPDATE (8/15):** you can now add additional routes as part of your code splitting strategy. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/62#issuecomment-322558836) for more info.\n\n> **UPDATE (9/5):** you can now block user navigation via the `confirmLeave` route option (and customize its appearance via the `displayConfirmLeave` option). See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/27#issuecomment-327431413) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/6):** MUCH ANTICIPATED FEATURE: you can now do all sorts of optional params in your paths, match multiple similar paths to the same type, use regexes, and use params that capture multiple segments. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/83#issuecomment-327703226) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/9):** *4 new thiings:* 1) route paths are now cached for better performance (less cycles wasted on parsing). 2) you can now do **pathless routes!**. I.e. you can use routes just for the purpose of the thunk feature, thereby achieving more uniformity across your async actions--just use RFR! Just dispatch the action type for which you have a thunk in your `routesMap` and it will be called like any other. To learn more about it: [check this example](https://gist.github.com/faceyspacey/2771c05a62a338fa6d3d23d76e6e7c5a). 3) now all thunks and callbacks (`onBeforeChange`, `onAfterChange`, etc) receive a 3rd *\"bag\"* argument which currently has a key for the current `action` and an `extra` key. More keys may be added later. The `extra` key is an option you provide to `connectRoutes` which is the equivalent of Redux-Thunk's *\"extra argument\"*. It just happens to be in our bag. That said, `onBeforeChange` used to receive just an `action` as a 3rd argument. So unfortunately this is a breaking change. Check the aforementioned example to learn more about this too. 4) lastly, now RFR skips actions with an `error` key; this should resolve a few quirks for developers using middleware that explicitly handle errors already. If it ever makes sense for RFR/Rudy to handle errors, we'll provide a robust solution. Half-assing as we've done doesn't make sense for now.\n\n\n# Redux-First Router\n\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n\n\n \n\n\n\n \n\n\n\n \n\n\n> **UPDATE (8/15):** you can now add additional routes as part of your code splitting strategy. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/62#issuecomment-322558836) for more info.\n\n> **UPDATE (9/5):** you can now block user navigation via the `confirmLeave` route option (and customize its appearance via the `displayConfirmLeave` option). See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/27#issuecomment-327431413) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/6):** MUCH ANTICIPATED FEATURE: you can now do all sorts of optional params in your paths, match multiple similar paths to the same type, use regexes, and use params that capture multiple segments. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/83#issuecomment-327703226) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/9):** *4 new thiings:* 1) route paths are now cached for better performance (less cycles wasted on parsing). 2) you can now do **pathless routes!**. I.e. you can use routes just for the purpose of the thunk feature, thereby achieving more uniformity across your async actions--just use RFR! Just dispatch the action type for which you have a thunk in your `routesMap` and it will be called like any other. To learn more about it: [check this example](https://gist.github.com/faceyspacey/2771c05a62a338fa6d3d23d76e6e7c5a). 3) now all thunks and callbacks (`onBeforeChange`, `onAfterChange`, etc) receive a 3rd *\"bag\"* argument which currently has a key for the current `action` and an `extra` key. More keys may be added later. The `extra` key is an option you provide to `connectRoutes` which is the equivalent of Redux-Thunk's *\"extra argument\"*. It just happens to be in our bag. That said, `onBeforeChange` used to receive just an `action` as a 3rd argument. So unfortunately this is a breaking change. Check the aforementioned example to learn more about this too. 4) lastly, now RFR skips actions with an `error` key; this should resolve a few quirks for developers using middleware that explicitly handle errors already. If it ever makes sense for RFR/Rudy to handle errors, we'll provide a robust solution. Half-assing as we've done doesn't make sense for now.\n\n\n# Redux-First Router\n\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n\n\n \n\n\n\n \n\n\n\n \n\n\n> **UPDATE (8/15):** you can now add additional routes as part of your code splitting strategy. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/62#issuecomment-322558836) for more info.\n\n> **UPDATE (9/5):** you can now block user navigation via the `confirmLeave` route option (and customize its appearance via the `displayConfirmLeave` option). See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/27#issuecomment-327431413) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/6):** MUCH ANTICIPATED FEATURE: you can now do all sorts of optional params in your paths, match multiple similar paths to the same type, use regexes, and use params that capture multiple segments. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/83#issuecomment-327703226) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/9):** *4 new thiings:* 1) route paths are now cached for better performance (less cycles wasted on parsing). 2) you can now do **pathless routes!**. I.e. you can use routes just for the purpose of the thunk feature, thereby achieving more uniformity across your async actions--just use RFR! Just dispatch the action type for which you have a thunk in your `routesMap` and it will be called like any other. To learn more about it: [check this example](https://gist.github.com/faceyspacey/2771c05a62a338fa6d3d23d76e6e7c5a). 3) now all thunks and callbacks (`onBeforeChange`, `onAfterChange`, etc) receive a 3rd *\"bag\"* argument which currently has a key for the current `action` and an `extra` key. More keys may be added later. The `extra` key is an option you provide to `connectRoutes` which is the equivalent of Redux-Thunk's *\"extra argument\"*. It just happens to be in our bag. That said, `onBeforeChange` used to receive just an `action` as a 3rd argument. So unfortunately this is a breaking change. Check the aforementioned example to learn more about this too. 4) lastly, now RFR skips actions with an `error` key; this should resolve a few quirks for developers using middleware that explicitly handle errors already. If it ever makes sense for RFR/Rudy to handle errors, we'll provide a robust solution. Half-assing as we've done doesn't make sense for now.\n\n\n# Redux-First Router\n\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n\n\n \n\n\n\n \n\n\n\n \n\n\n> **UPDATE (8/15):** you can now add additional routes as part of your code splitting strategy. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/62#issuecomment-322558836) for more info.\n\n> **UPDATE (9/5):** you can now block user navigation via the `confirmLeave` route option (and customize its appearance via the `displayConfirmLeave` option). See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/27#issuecomment-327431413) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/6):** MUCH ANTICIPATED FEATURE: you can now do all sorts of optional params in your paths, match multiple similar paths to the same type, use regexes, and use params that capture multiple segments. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/83#issuecomment-327703226) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/9):** *4 new thiings:* 1) route paths are now cached for better performance (less cycles wasted on parsing). 2) you can now do **pathless routes!**. I.e. you can use routes just for the purpose of the thunk feature, thereby achieving more uniformity across your async actions--just use RFR! Just dispatch the action type for which you have a thunk in your `routesMap` and it will be called like any other. To learn more about it: [check this example](https://gist.github.com/faceyspacey/2771c05a62a338fa6d3d23d76e6e7c5a). 3) now all thunks and callbacks (`onBeforeChange`, `onAfterChange`, etc) receive a 3rd *\"bag\"* argument which currently has a key for the current `action` and an `extra` key. More keys may be added later. The `extra` key is an option you provide to `connectRoutes` which is the equivalent of Redux-Thunk's *\"extra argument\"*. It just happens to be in our bag. That said, `onBeforeChange` used to receive just an `action` as a 3rd argument. So unfortunately this is a breaking change. Check the aforementioned example to learn more about this too. 4) lastly, now RFR skips actions with an `error` key; this should resolve a few quirks for developers using middleware that explicitly handle errors already. If it ever makes sense for RFR/Rudy to handle errors, we'll provide a robust solution. Half-assing as we've done doesn't make sense for now.\n\n\n# Redux-First Router\n\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n\n\n \n\n\n\n \n\n\n\n \n\n\n### Road to Rudy!:\n\n> **UPDATE (8/15):** you can now add additional routes as part of your code splitting strategy. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/62#issuecomment-322558836) for more info.\n\n> **UPDATE (9/5):** you can now block user navigation via the `confirmLeave` route option (and customize its appearance via the `displayConfirmLeave` option). See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/27#issuecomment-327431413) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/6):** MUCH ANTICIPATED FEATURE: you can now do all sorts of optional params in your paths, match multiple similar paths to the same type, use regexes, and use params that capture multiple segments. See [this issue comment](https://github.com/faceyspacey/redux-first-router/issues/83#issuecomment-327703226) for more info. Do `yarn upgrade redux-first-router@next` to get it.\n\n> **UPDATE (9/9):** *4 new things:* 1) route paths are now cached for better performance (less cycles wasted on parsing). 2) you can now do **pathless routes!**. I.e. you can use routes just for the purpose of the thunk feature, thereby achieving more uniformity across your async actions--just use RFR! Just dispatch the action type for which you have a thunk in your `routesMap` and it will be called like any other. To learn more about it: [check this example](https://gist.github.com/faceyspacey/2771c05a62a338fa6d3d23d76e6e7c5a). 3) now all thunks and callbacks (`onBeforeChange`, `onAfterChange`, etc) receive a 3rd *\"bag\"* argument which currently has a key for the current `action` and an `extra` key. More keys may be added later. The `extra` key is an option you provide to `connectRoutes` which is the equivalent of Redux-Thunk's *\"extra argument\"*. It just happens to be in our bag. That said, `onBeforeChange` used to receive just an `action` as a 3rd argument. So unfortunately this is a breaking change. Check the aforementioned example to learn more about this too. 4) lastly, now RFR skips actions with an `error` key; this should resolve a few quirks for developers using middleware that explicitly handle errors already. If it ever makes sense for RFR/Rudy to handle errors, we'll provide a robust solution. Half-assing as we've done doesn't make sense for now.\n\n> **UPDATE (9/16):** There is now a `basename` option. Also, `history` is no longer passed to `connectRoutes`. The `history` package is handled internally. Yup, a breaking change, but a super quick fix in one place. Check [this comment](https://github.com/faceyspacey/redux-first-router/issues/103#issuecomment-329972201) for more info. Lastly, to upgrade now do this: `yarn upgrade redux-first-router@rudy redux-first-router-link@rudy` :) ...next and master branches are locked in forever basically and will never be touched again :). The `rudy` branch will become **Rudy**.\n\n> **UPDATE (9/18):** There is now a `createHistory` option. Get it from the `rudy` tag on NPM. This was specifically implemented for [people that want to use the hashHistory](https://github.com/faceyspacey/redux-first-router/issues/114#issuecomment-330499555) which I wasn't aware anyone wanted to do, plus it's also useful when testing your own implementation or forks.\n\n> **UPDATE (9/22):** BREAKING CHANGE: now `toPath` and `fromPath` on your routes are passed all path segments, even if they are numbers. No automatic transformations will happen if you provide these transformation functions. Get it **@rudy** on NPM.\n\n# Redux-First Router\n\n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n\n\n \n\n\n\n \n\n\n\n \n\n\n### Road to Rudy!:\nWe will be moving Rudy to a new repo within our `respond` organization. \n\nRFR will be entering a LTS state as Rudy takes focus.\n\n# Redux-First Router\n\n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n\n\n \n\n\n\n \n\n\n\n \n\n\n> **Rudy:** We are moving rudy to a new repo housed inside of our respond-framework organization. RFR will enter LTS as Feature development efforts are redirected to Rudy. link will be added here once i make the repo and move Rudy to it. \n\n\n# Redux-First Router\n\n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n \n \n \n \n \n ![\"Min](\"https://img.shields.io/node/v/redux-first-router.svg\")
\n \n \n \n \n \n \n\n \n \n \n\n## Motivation\nTo be able to use Redux *as is* while keeping the address bar in sync. To define paths as actions, and handle path params and query strings as action payloads.\n\nThe address bar and Redux actions should be *bi-directionally* mapped, including via the browser's back/forward buttons. Dispatch an action and the address bar updates.\nChange the address, and an action is dispatched.\n\nIn addition, here are some obstacles **Redux-First Router** seeks to *avoid*:\n\n* Rendering from state that doesn't come from Redux\n* Dealing with the added complexity from having state outside of Redux\n* Cluttering components with route-related code\n* Large API surface areas of frameworks like `react-router` and `next.js`\n* Routing frameworks getting in the way of optimizing animations (such as when animations coincide with component updates).\n* Having to do route changes differently in order to support server-side rendering.\n\n## Usage\n\n### Install\n`yarn add redux-first-router`\n\n(A minimal `` component exists in the separate package [`redux-first-router-link`](https://github.com/faceyspacey/redux-first-router-link).)\n\n### Quickstart\n\n```js\n// configureStore.js\nimport { applyMiddleware, combineReducers, compose, createStore } from 'redux'\nimport { connectRoutes } from 'redux-first-router'\n\nimport page from './pageReducer'\n\nconst routesMap = {\n HOME: '/',\n USER: '/user/:id'\n}\n\nexport default function configureStore(preloadedState) {\n const { reducer, middleware, enhancer } = connectRoutes(routesMap)\n\n const rootReducer = combineReducers({ page, location: reducer })\n const middlewares = applyMiddleware(middleware)\n const enhancers = compose(enhancer, middlewares)\n\n const store = createStore(rootReducer, preloadedState, enhancers)\n\n return { store }\n}\n```\n\n```js\n// pageReducer.js\nimport { NOT_FOUND } from 'redux-first-router'\n\nconst components = {\n HOME: 'Home',\n USER: 'User',\n [NOT_FOUND]: 'NotFound'\n}\n\nexport default (state = 'HOME', action = {}) => components[action.type] || state\n```\n\n```js\n// App.js\nimport React from 'react'\nimport { connect } from 'react-redux'\n\n// Contains 'Home', 'User' and 'NotFound'\nimport * as components from './components';\n\nconst App = ({ page }) => {\n const Component = components[page]\n return