@rabbitcc/react-router-redux
v5.0.0-alpha.9
Published
Redux bindings for React Router
Downloads
5
Readme
react-router-redux
Keep your state in sync with your router :sparkles:
This is beta software, it needs:
- A working example
- Some people to try it out and find bugs
- A strategy for working with the devtools
- (issue describing a different approach to what we've seen previously coming soon)
Versions
This (react-router-redux 5.x) is the version of react-router-redux for use with react-router 4.x. Users of react-router 2.x and 3.x want to use react-router-redux found at the legacy repository.
Installation
npm install --save react-router-redux@next
npm install --save history
Usage
Here's a basic idea of how it works:
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import createHistory from 'history/createBrowserHistory'
import { Route } from 'react-router'
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'
import reducers from './reducers' // Or wherever you keep your reducers
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()
// Build the middleware for intercepting and dispatching navigation actions
const middleware = routerMiddleware(history)
// Add the reducer to your store on the `router` key
// Also apply our middleware for navigating
const store = createStore(
combineReducers({
...reducers,
router: routerReducer
}),
applyMiddleware(middleware)
)
// Now you can dispatch navigation actions from anywhere!
// store.dispatch(push('/foo'))
ReactDOM.render(
<Provider store={store}>
{ /* ConnectedRouter will use the store from Provider automatically */ }
<ConnectedRouter history={history}>
<div>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
)