Skip to content
This repository was archived by the owner on Oct 26, 2018. It is now read-only.

Commit 5fbdd4e

Browse files
committed
Prepare README for 2.0
Fix typo Clearify LocationDescriptor Added API entry for syncHistoryToStore Simplify Server-side example Removed Server-side example
1 parent 6760e40 commit 5fbdd4e

File tree

1 file changed

+29
-22
lines changed

1 file changed

+29
-22
lines changed

README.md

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,26 @@ Let's take a look at a simple example.
4747
```js
4848
import React from 'react'
4949
import ReactDOM from 'react-dom'
50-
import { createStore, combineReducers } from 'redux'
50+
import { compose, createStore, combineReducers, applyMiddleware } from 'redux'
5151
import { Provider } from 'react-redux'
5252
import { Router, Route } from 'react-router'
5353
import { createHistory } from 'history'
54-
import { syncReduxAndRouter, routeReducer } from 'redux-simple-router'
54+
import { syncHistory, routeReducer } from 'redux-simple-router'
5555
import reducers from '<project-path>/reducers'
5656

5757
const reducer = combineReducers(Object.assign({}, reducers, {
5858
routing: routeReducer
5959
}))
60-
const store = createStore(reducer)
6160
const history = createHistory()
6261

63-
syncReduxAndRouter(history, store)
62+
// Sync dispatched route actions to the history
63+
const reduxRouterMiddleware = syncHistory(history)
64+
const createStoreWithMiddleware = applyMiddleware(reduxRouterMiddleware)(createStore)
65+
66+
const store = createStoreWithMiddleware(reducer)
67+
68+
// Sync store to history
69+
reduxRouterMiddleware.syncHistoryToStore(store)
6470

6571
ReactDOM.render(
6672
<Provider store={store}>
@@ -75,24 +81,24 @@ ReactDOM.render(
7581
)
7682
```
7783

78-
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:
84+
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:
7985

8086
```js
81-
import { pushPath } from 'redux-simple-router'
87+
import { routeActions } from 'redux-simple-router'
8288

8389
function MyComponent({ dispatch }) {
84-
return <Button onClick={() => dispatch(pushPath('/foo'))}/>;
90+
return <Button onClick={() => dispatch(routeActions.push('/foo'))}/>;
8591
}
8692
```
8793

88-
This will change the state, which will trigger a change in react-router. Additionally, if you want to respond to the path update action, just handle the `UPDATE_PATH` constant that we provide:
94+
This will change the state, which will trigger a change in react-router. Additionally, if you want to respond to the path update action, just handle the `UPDATE_LOCATION` constant that we provide:
8995

9096
```js
91-
import { UPDATE_PATH } from 'redux-simple-router'
97+
import { UPDATE_LOCATION } from 'redux-simple-router'
9298

9399
function update(state, action) {
94100
switch(action.type) {
95-
case UPDATE_PATH:
101+
case UPDATE_LOCATION:
96102
// do something here
97103
}
98104
}
@@ -115,30 +121,31 @@ _Have an example to add? Send us a PR!_
115121

116122
### API
117123

118-
#### `syncReduxAndRouter(history, store, selectRouterState?)`
124+
#### `syncHistory(history: History) => ReduxMiddleware`
125+
126+
Call this to create a middleware that has to be registered with your Redux store to keep updates to the store in sync with with the history. The middleware will look for route actions created by `push` or `replace` and applies them to the history.
119127

120-
Call this with a react-router and a redux store instance to install hooks that always keep both of them in sync. When one changes, so will the other.
128+
#### `syncHistoryToStore(store: ReduxStore, selectRouterState?: function)`
129+
130+
Call this on the middleware provided by `syncHistory` to keep changes on the Redux store that don't originate from a dispatched route action (e.g.: from the DevTools) in sync with the history.
121131

122132
Supply an optional function `selectRouterState` to customize where to find the router state on your app state. It defaults to `state => state.routing`, so you would install the reducer under the name "routing". Feel free to change this to whatever you like.
123133

124134
#### `routeReducer`
125135

126-
A reducer function that keeps track of the router state. You must to add this reducer to your app reducers when creating the store. If you do not provide a custom `selectRouterState` function, the piece of state must be named `routing`.
136+
A reducer function that keeps track of the router state. You must to add this reducer to your app reducers when creating the store.
127137

128-
#### `UPDATE_PATH`
138+
#### `UPDATE_LOCATION`
129139

130140
An action type that you can listen for in your reducers to be notified of route updates.
131141

132-
#### `pushPath(path, state, { avoidRouterUpdate = false } = {})`
133-
134-
An action creator that you can use to update the current URL and update the browser history. Just pass it a string like `/foo/bar?param=5` as the `path` argument.
135-
136-
You can optionally pass a state to this action creator to update the state of the current route.
142+
#### `push(nextLocation: LocationDescriptor)`
137143

138-
The `avoidRouterUpdate`, if `true`, will stop react-router from reacting to this URL change. This is useful if replaying snapshots while using the `forceRefresh` option of the browser history which forces full reloads. It's a rare edge case.
144+
An action creator that you can use to update the current URL and update the browser history.
145+
The LocationDescriptor parameter can be either as string with the path or a [LocationDescriptorObject](https://github.com/rackt/history/blob/v1.17.0/docs/Glossary.md#locationdescriptor) if you need more detailed control.
139146

140-
#### `replacePath(path, state, { avoidRouterUpdate = false } = {})`
147+
#### `replace(nextLocation: LocationDescriptor)`
141148

142149
An action creator that you can use to replace the current URL without updating the browser history.
143150

144-
The `state` and the `avoidRouterUpdate` parameters work just like `pushPath`.
151+
The `nextLocation` parameter works just like the parameter for the `push` action creator.

0 commit comments

Comments
 (0)