Neo's Playing Morpheus

    @rabbitcc/react-router-redux

    5.0.0-alpha.9 • Public • Published

    react-router-redux

    npm version npm downloads build status

    Keep your state in sync with your router

    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')
    )

    Keywords

    none

    Install

    npm i @rabbitcc/react-router-redux

    DownloadsWeekly Downloads

    2

    Version

    5.0.0-alpha.9

    License

    MIT

    Unpacked Size

    35.3 kB

    Total Files

    27

    Last publish

    Collaborators

    • rabbitcc