react-router-redux
Ruthlessly simple bindings to keep react-router and redux in sync
Last updated 3 years ago by timdorr .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-router-redux 
SYNC missed versions from official npm registry.

react-router-redux

npm version npm downloads build status

Keep your state in sync with your router :sparkles:

This is beta software, it needs:

  1. A working example
  2. Some people to try it out and find bugs
  3. 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')
)

Current Tags

  • 4.0.8                                ...           latest (3 years ago)
  • 5.0.0-alpha.9                                ...           next (2 years ago)

22 Versions

  • 5.0.0-alpha.9 [deprecated]           ...           2 years ago
  • 5.0.0-alpha.8                                ...           2 years ago
  • 5.0.0-alpha.7                                ...           2 years ago
  • 5.0.0-alpha.6                                ...           3 years ago
  • 5.0.0-alpha.5                                ...           3 years ago
  • 5.0.0-alpha.4                                ...           3 years ago
  • 5.0.0-alpha.3                                ...           3 years ago
  • 5.0.0-alpha.2                                ...           3 years ago
  • 5.0.0-alpha.1                                ...           3 years ago
  • 4.0.8                                ...           3 years ago
  • 4.0.7                                ...           3 years ago
  • 4.0.6                                ...           3 years ago
  • 4.0.5                                ...           3 years ago
  • 4.0.4                                ...           3 years ago
  • 4.0.2                                ...           4 years ago
  • 4.0.1                                ...           4 years ago
  • 4.0.0                                ...           4 years ago
  • 4.0.0-rc.2                                ...           4 years ago
  • 4.0.0-rc.1                                ...           4 years ago
  • 4.0.0-beta.1                                ...           4 years ago
  • 3.0.0                                ...           4 years ago
  • 2.1.0                                ...           4 years ago
Downloads
Today 58
This Week 4,138
This Month 15,675
Last Day 2,045
Last Week 10,150
Last Month 43,989
Dependencies (0)
None
Dependents (1674)

Copyright 2014 - 2016 © taobao.org |