Created
August 14, 2015 06:33
-
-
Save hedgerh/94cd5592ea78aa171dd2 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { Router } from 'react-router'; | |
| import { createStore } from 'redux'; | |
| import { Provider } from 'react-redux'; | |
| import App from '../shared/containers/App'; | |
| import todoApp from '../shared/reducers'; | |
| import routes from '../shared/routes'; | |
| import immutifyState from '../shared/lib/immutifyState'; | |
| const initialState = immutifyState(window.__INITIAL_STATE__); | |
| let store = createStore(todoApp, initialState); | |
| let rootElement = document.getElementById('react-view'); | |
| React.render( | |
| // The child must be wrapped in a function | |
| // to work around an issue in React 0.13. | |
| <Provider store={store}> | |
| {() => <Router children={routes} />} | |
| </Provider>, | |
| rootElement | |
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Express from 'express'; | |
| import React from 'react'; | |
| import { Router } from 'react-router'; | |
| import Location from 'react-router/lib/Location'; | |
| import { createStore } from 'redux'; | |
| import { Provider } from 'react-redux'; | |
| import routes from './shared/routes'; | |
| import todoApp from './shared/reducers'; | |
| const app = Express(); | |
| export default app; | |
| app.use((req, res) => { | |
| const location = new Location(req.path, req.query); | |
| const store = createStore(todoApp); | |
| console.routes = | |
| Router.run(routes, location, (err, routeState) => { | |
| if(err) return console.error(err); | |
| function renderView() { | |
| const InitialView = ( | |
| <Provider store={store}> | |
| {() => | |
| <Router {...routeState} /> | |
| } | |
| </Provider> | |
| ); | |
| const componentHTML = React.renderToString(InitialView); | |
| const initialState = store.getState(); | |
| const HTML = ` | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Redux Demo</title> | |
| <script> | |
| window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}; | |
| </script> | |
| </head> | |
| <body> | |
| <div id="react-view">${componentHTML}</div> | |
| <script type="application/javascript" src="/bundle.js"></script> | |
| </body> | |
| </html> | |
| `; | |
| res.end(HTML); | |
| } | |
| if (routeState) { | |
| renderView(); | |
| } | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment