finboxio-redux-routing
v0.3.2
Published
Universal routing built on top of redux
Downloads
4
Readme
redux-routing
Universal routing built on top of redux.
For usage with React see example/main.js. See redux-routing-universal-example for an example of a universal application that renders on both client and server.
install
npm install redux-routing --save
how it works
import { applyMiddleware, createStore } from 'redux'
import { createMiddleware, History, match, navigate, reducer, route } from 'redux-routing'
// define routes
const routes = [
route('/', () => console.log('navigated to /')),
route('/foo', () => console.log('navigated to /foo')),
route('/foo/:bar', () => console.log('navigated to /foo/:bar'))
]
// create routing middleware, set up with HTML5 History
const middleware = createMiddleware(History)
// create store with middleware
const createStoreWithMiddleware = applyMiddleware(middleware)(createStore)
const store = createStoreWithMiddleware(reducer)
// subscribe to changes
store.subscribe(() => {
const route = store.getState()
const matched = match(route.href, routes)
if (matched) {
matched.handler()
} else {
console.log('404 not found')
}
})
// start navigating
store.dispatch(navigate('/'))
// logs 'navigated to /'
store.dispatch(navigate('/foo'))
// logs 'navigated to /foo'
store.dispatch(navigate('/foo/123'))
// logs 'navigated to /foo/:bar'
store.dispatch(navigate('/foo/bar/baz'))
// logs '404 not found'
See path-parser for more detail on defining routes.