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

Commit 8d5b39b

Browse files
timdorrtimdorr
committed
Merge pull request #259 from reactjs/synchronicity
Split history syncing from action creators
2 parents 83462cc + 8d4750e commit 8d5b39b

32 files changed

+1031
-870
lines changed

‎.babelrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["es2015", "stage-2"]
2+
"presets": ["es2015", "stage-1"]
33
}

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
lib
22
node_modules
33
coverage
4+
*.log

‎README.md

Lines changed: 89 additions & 84 deletions
Large diffs are not rendered by default.

‎examples/basic/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ This example also demonstrates integration with
1313

1414
1. Install dependencies with `npm install` in this directory (make sure it creates a local node_modules)
1515
2. By default, it uses the local version from `src` of react-router-redux, so you need to run `npm install` from there first. If you want to use a version straight from npm, remove the lines in `webpack.config.js` at the bottom.
16-
3. Build with `webpack --watch`
17-
4. Open `index.html`
16+
3. Start build with `npm start`
17+
4. Open [http://localhost:8080/](http://localhost:8080/)
1818

1919
-
2020

‎examples/basic/app.js

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,35 @@ import DockMonitor from 'redux-devtools-dock-monitor'
44

55
import React from 'react'
66
import ReactDOM from 'react-dom'
7-
import { applyMiddleware, compose, createStore, combineReducers } from 'redux'
7+
import { createStore, combineReducers } from 'redux'
88
import { Provider } from 'react-redux'
99
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
10-
import { syncHistory, routeReducer } from 'react-router-redux'
10+
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
1111

1212
import * as reducers from './reducers'
1313
import { App, Home, Foo, Bar } from './components'
1414

15-
const middleware = syncHistory(browserHistory)
1615
const reducer = combineReducers({
1716
...reducers,
18-
routing: routeReducer
17+
routing: routerReducer
1918
})
2019

2120
const DevTools = createDevTools(
22-
<DockMonitor toggleVisibilityKey="ctrl-h"
23-
changePositionKey="ctrl-q">
21+
<DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
2422
<LogMonitor theme="tomorrow" preserveScrollTop={false} />
2523
</DockMonitor>
2624
)
2725

28-
const finalCreateStore = compose(
29-
applyMiddleware(middleware),
26+
const store = createStore(
27+
reducer,
3028
DevTools.instrument()
31-
)(createStore)
32-
const store = finalCreateStore(reducer)
33-
middleware.listenForReplays(store)
29+
)
30+
const history = syncHistoryWithStore(browserHistory, store)
3431

3532
ReactDOM.render(
3633
<Provider store={store}>
3734
<div>
38-
<Router history={browserHistory}>
35+
<Router history={history}>
3936
<Route path="/" component={App}>
4037
<IndexRoute component={Home}/>
4138
<Route path="foo" component={Foo}/>

‎examples/basic/components/App.js

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React from 'react'
2-
import { Link } from 'react-router'
3-
import { connect } from 'react-redux'
4-
import { routeActions } from 'react-router-redux'
2+
import { Link, hashHistory } from 'react-router'
53

6-
function App({ push, children }) {
4+
export default function App({ children }) {
75
return (
86
<div>
97
<header>
@@ -16,14 +14,9 @@ function App({ push, children }) {
1614
<Link to="/bar">Bar</Link>
1715
</header>
1816
<div>
19-
<button onClick={() => push('/foo')}>Go to /foo</button>
17+
<button onClick={() => hashHistory.push('/foo')}>Go to /foo</button>
2018
</div>
2119
<div style={{ marginTop: '1.5em' }}>{children}</div>
2220
</div>
2321
)
2422
}
25-
26-
export default connect(
27-
null,
28-
routeActions
29-
)(App)

‎examples/basic/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
</head>
77
<body>
88
<div id="mount"></div>
9-
<script src="dist/bundle.js"></script>
9+
<script src="/bundle.js"></script>
1010
</body>
1111
</html>

‎examples/basic/package.json

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,30 @@
44
"repository": "reactjs/react-router-redux",
55
"license": "MIT",
66
"dependencies": {
7-
"react": "^0.14.2",
8-
"react-dom": "^0.14.2",
9-
"react-redux": "^4.0.0",
7+
"react": "^0.14.7",
8+
"react-dom": "^0.14.7",
9+
"react-redux": "^4.3.0",
1010
"react-router": "^2.0.0",
11-
"redux": "^3.0.4",
12-
"react-router-redux": "^2.1.0"
11+
"redux": "^3.2.1",
12+
"react-router-redux": "^3.0.0"
1313
},
1414
"devDependencies": {
15-
"babel-core": "^6.1.21",
16-
"babel-eslint": "^5.0.0-beta6",
17-
"babel-loader": "^6.2.0",
18-
"babel-preset-es2015": "^6.1.18",
19-
"babel-preset-react": "^6.1.18",
15+
"babel-core": "^6.4.5",
16+
"babel-eslint": "^5.0.0-beta9",
17+
"babel-loader": "^6.2.2",
18+
"babel-preset-es2015": "^6.3.13",
19+
"babel-preset-react": "^6.3.13",
2020
"babel-preset-stage-1": "^6.3.13",
2121
"eslint": "^1.10.3",
2222
"eslint-config-rackt": "^1.1.1",
23-
"eslint-plugin-react": "^3.15.0",
24-
"redux-devtools": "^3.0.0",
23+
"eslint-plugin-react": "^3.16.1",
24+
"redux-devtools": "^3.1.0",
2525
"redux-devtools-dock-monitor": "^1.0.1",
26-
"redux-devtools-log-monitor": "^1.0.1",
27-
"webpack": "^1.12.6"
26+
"redux-devtools-log-monitor": "^1.0.4",
27+
"webpack": "^1.12.13",
28+
"webpack-dev-server": "^1.14.1"
2829
},
2930
"scripts": {
30-
"start": "webpack --watch"
31+
"start": "webpack-dev-server --history-api-fallback --no-info --open"
3132
}
3233
}

‎examples/server/.babelrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": ["es2015", "react", "stage-1"],
3+
"plugins": [
4+
["babel-plugin-module-alias", [
5+
{ "src": "../../src", "expose": "react-router-redux" }
6+
]]
7+
]
8+
}

‎examples/server/client.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import 'babel-polyfill'
2+
3+
import React from 'react'
4+
import { render } from 'react-dom'
5+
6+
import { Provider } from 'react-redux'
7+
import { Router, browserHistory } from 'react-router'
8+
import { syncHistoryWithStore } from 'react-router-redux'
9+
10+
import { configureStore, DevTools } from './store'
11+
import routes from './routes'
12+
13+
const store = configureStore(browserHistory, window.__initialState__)
14+
const history = syncHistoryWithStore(browserHistory, store)
15+
16+
render(
17+
<Provider store={store}>
18+
<Router history={history} routes={routes} />
19+
</Provider>,
20+
document.getElementById('root')
21+
)
22+
23+
render(
24+
<Provider store={store}>
25+
<DevTools/>
26+
</Provider>,
27+
document.getElementById('devtools')
28+
)

‎examples/server/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>react-router-redux server rendering example</title>
5+
<meta charset="utf8"/>
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
<script src="/bundle.js"></script>
10+
</body>
11+
</html>

‎examples/server/package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "rrr-server-example",
3+
"version": "0.0.0",
4+
"repository": "reactjs/react-router-redux",
5+
"license": "MIT",
6+
"dependencies": {
7+
"react": "^0.14.7",
8+
"react-dom": "^0.14.7",
9+
"react-redux": "^4.3.0",
10+
"react-router": "^2.0.0",
11+
"react-router-redux": "^3.0.0",
12+
"redux": "^3.2.1",
13+
"serialize-javascript": "^1.1.2"
14+
},
15+
"devDependencies": {
16+
"babel-cli": "^6.5.1",
17+
"babel-core": "^6.4.5",
18+
"babel-eslint": "^5.0.0-beta9",
19+
"babel-loader": "^6.2.2",
20+
"babel-plugin-module-alias": "^1.2.0",
21+
"babel-preset-es2015": "^6.3.13",
22+
"babel-preset-react": "^6.3.13",
23+
"babel-preset-stage-1": "^6.3.13",
24+
"babel-register": "^6.5.2",
25+
"eslint": "^1.10.3",
26+
"eslint-config-rackt": "^1.1.1",
27+
"eslint-plugin-react": "^3.16.1",
28+
"express": "^4.13.4",
29+
"redux-devtools": "^3.1.1",
30+
"redux-devtools-dock-monitor": "^1.0.1",
31+
"redux-devtools-log-monitor": "^1.0.4",
32+
"webpack": "^1.12.13",
33+
"webpack-dev-middleware": "^1.5.1"
34+
},
35+
"scripts": {
36+
"start": "babel-node server.js"
37+
}
38+
}

‎examples/server/routes.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import { Route, IndexRoute, Link } from 'react-router'
3+
4+
const App = ({ children }) => (
5+
<div>
6+
<header>
7+
Links:
8+
{' '}
9+
<Link to="/">Home</Link>
10+
{' '}
11+
<Link to="/foo">Foo</Link>
12+
{' '}
13+
<Link to="/bar">Bar</Link>
14+
</header>
15+
{children}
16+
</div>
17+
)
18+
19+
const Home = () => (<div>Home!</div>)
20+
const Foo = () => (<div>Foo!</div>)
21+
const Bar = () => (<div>Bar!</div>)
22+
23+
const routes = (
24+
<Route path="/" component={App}>
25+
<IndexRoute component={Home}/>
26+
<Route path="foo" component={Foo}/>
27+
<Route path="bar" component={Bar}/>
28+
</Route>
29+
)
30+
31+
export default routes

‎examples/server/server.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/*eslint-disable no-console */
2+
import express from 'express'
3+
import serialize from 'serialize-javascript'
4+
5+
import webpack from 'webpack'
6+
import webpackDevMiddleware from 'webpack-dev-middleware'
7+
import webpackConfig from './webpack.config'
8+
9+
import React from 'react'
10+
import { renderToString } from 'react-dom/server'
11+
import { Provider } from 'react-redux'
12+
import { createMemoryHistory, match, RouterContext } from 'react-router'
13+
import { syncHistoryWithStore } from '../../src'
14+
15+
import { configureStore } from './store'
16+
import routes from './routes'
17+
18+
const app = express()
19+
20+
app.use(webpackDevMiddleware(webpack(webpackConfig), {
21+
publicPath: '/__build__/',
22+
stats: {
23+
colors: true
24+
}
25+
}))
26+
27+
const HTML = ({ content, store }) => (
28+
<html>
29+
<body>
30+
<div id="root" dangerouslySetInnerHTML={{ __html: content }}/>
31+
<div id="devtools"/>
32+
<script dangerouslySetInnerHTML={{ __html: `window.__initialState__=${serialize(store.getState())};` }}/>
33+
<script src="/__build__/bundle.js"/>
34+
</body>
35+
</html>
36+
)
37+
38+
app.use(function (req, res) {
39+
const memoryHistory = createMemoryHistory(req.path)
40+
const store = configureStore(memoryHistory)
41+
const history = syncHistoryWithStore(memoryHistory, store)
42+
43+
match({ history, routes, location: req.url }, (error, redirectLocation, renderProps) => {
44+
if (error) {
45+
res.status(500).send(error.message)
46+
} else if (redirectLocation) {
47+
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
48+
} else if (renderProps) {
49+
const content = renderToString(
50+
<Provider store={store}>
51+
<RouterContext {...renderProps}/>
52+
</Provider>
53+
)
54+
55+
res.send('<!doctype html>\n' + renderToString(<HTML content={content} store={store}/>))
56+
}
57+
})
58+
})
59+
60+
app.listen(8080, function () {
61+
console.log('Server listening on http://localhost:8080, Ctrl+C to stop')
62+
})

‎examples/server/store.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react'
2+
3+
import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
4+
import { createDevTools } from 'redux-devtools'
5+
import LogMonitor from 'redux-devtools-log-monitor'
6+
import DockMonitor from 'redux-devtools-dock-monitor'
7+
8+
import { routerReducer, routerMiddleware } from 'react-router-redux'
9+
10+
export const DevTools = createDevTools(
11+
<DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
12+
<LogMonitor theme="tomorrow" preserveScrollTop={false} />
13+
</DockMonitor>
14+
)
15+
16+
export function configureStore(history, initialState) {
17+
const reducer = combineReducers({
18+
routing: routerReducer
19+
})
20+
21+
let devTools = []
22+
if (typeof document !== 'undefined') {
23+
devTools = [ DevTools.instrument() ]
24+
}
25+
26+
const store = createStore(
27+
reducer,
28+
initialState,
29+
compose(
30+
applyMiddleware(
31+
routerMiddleware(history)
32+
),
33+
...devTools
34+
)
35+
)
36+
37+
return store
38+
}

0 commit comments

Comments
 (0)