diff --git a/README.md b/README.md index 35928a9..87c0a8e 100644 --- a/README.md +++ b/README.md @@ -47,20 +47,26 @@ Let's take a look at a simple example. ```js import React from 'react' import ReactDOM from 'react-dom' -import { createStore, combineReducers } from 'redux' +import { compose, createStore, combineReducers, applyMiddleware } from 'redux' import { Provider } from 'react-redux' import { Router, Route } from 'react-router' import { createHistory } from 'history' -import { syncReduxAndRouter, routeReducer } from 'redux-simple-router' +import { syncHistory, routeReducer } from 'redux-simple-router' import reducers from '/reducers' const reducer = combineReducers(Object.assign({}, reducers, { routing: routeReducer })) -const store = createStore(reducer) const history = createHistory() -syncReduxAndRouter(history, store) +// Sync dispatched route actions to the history +const reduxRouterMiddleware = syncHistory(history) +const createStoreWithMiddleware = applyMiddleware(reduxRouterMiddleware)(createStore) + +const store = createStoreWithMiddleware(reducer) + +// Sync store to history +reduxRouterMiddleware.syncHistoryToStore(store) ReactDOM.render( @@ -75,24 +81,24 @@ ReactDOM.render( ) ``` -Now you can read from `state.routing.path` to get the URL. It's far more likely that you want to change the URL more often, however. You can use the `pushPath` action creator that we provide: +Now you can read from `state.routing.location.pathname` to get the URL. It's far more likely that you want to change the URL more often, however. You can use the `push` action creator that we provide: ```js -import { pushPath } from 'redux-simple-router' +import { routeActions } from 'redux-simple-router' function MyComponent({ dispatch }) { - return