Redux-First Routing
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.
Ideology
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).
Installation
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>
Recipies
API
State Shape
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:
{
...,
location: {
pathname: '/nested/path/',
search: '?with=query',
queries: {
with: 'query',
},
hash: '#and-hash'
}
}
Exports
Here's a look at the exports in src/index.js
:
export { createBrowserHistory } from 'history/createBrowserHistory';
export { startListener } from './listener';
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.
Contributing
Contributions are welcome and are greatly appreciated! :tada:
Feel free to file an issue, start a discussion, or send a pull request.
License
MIT