Achieve client-side routing the Redux way:

• Read location data from the store.
• Update the location by dispatching navigation actions.
• Let middleware handle the side-effect of history navigation.

This library wraps history and provides a minimal, framework-agnostic base for accomplishing Redux-first routing. It does not provide the actual router component.

Instead, you can pair it with a compatible client-side routing library from your framework of choice, to create a complete routing solution (see Recipies for full examples).

Using npm:

npm install --save redux-first-routing 

Or, use the following script tag to access the latest UMD build on window.ReduxFirstRouting:

<script src="https://unpkg.com/redux-first-routing/dist/redux-first-routing.min.js"></script>

• Basic Usage
• Usage with Universal Router

There are dozens of ways to design the state shape of the location data, and this project must by nature choose a single, opinonated design. Here is the current design:

// window.location => www.example.com/nested/path?with=query#and-hash { ..., // other redux state  location: { pathname: '/nested/path/', search: '?with=query', queries: { with: 'query', }, hash: '#and-hash' } }

Here's a look at the exports in src/index.js:

// History API export { createBrowserHistory } from 'history/createBrowserHistory'; export { startListener } from './listener'; // Redux API export { PUSH, REPLACE, GO, GO_BACK, GO_FORWARD, LOCATION_CHANGE } from './constants'; export { push, replace, go, goBack, goForward, locationChange } from './actions'; export { routerMiddleware } from './middleware'; export { routerReducer } from './reducer';

• Redux API
  • push(), replace(), go(), goBack(), goForward()
    • Public action creators used to update the location.
    • Use these navigation actions instead of calling the history navigation methods directly!
  • PUSH, REPLACE, GO, GO_BACK, GO_FORWARD
    • Public action types for use in user-defined middleware.
  • routerMiddleware(history)
    • Intercepts the navigation actions to update the browser history.
  • routerReducer
    • Adds the location data (pathname, search, hash) to the state tree upon receiving a LOCATION_CHANGE action.
• History API
  • createBrowserHistory()
    • Creates a history object.
  • startListener(history, store)
    • Creates a history listener that responds to the middleware and external navigation by dispatching a locationChange action.

Contributions are welcome and are greatly appreciated! 🎉

Feel free to file an issue, start a discussion, or send a pull request.

MIT