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 framework-agnostic base for accomplishing Redux-first routing. For a complete routing solution, pair it with a compatible client-side routing library (see Recipies for examples).

• Basic Usage
• Usage with Universal Router

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

{ ..., // other redux state  location: { pathname: '/nested/path/', search: '?with=query', queries: { with: 'query', }, hash: '#and-hash' } } // current location: 'www.website.com/nested/path?with=query#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