diff --git a/client/index.js b/client/index.js index 3df7517..1504274 100644 --- a/client/index.js +++ b/client/index.js @@ -7,7 +7,7 @@ import configureStore from '../common/store/configureStore'; import Root from '../common/views/Root'; const history = createHashHistory({ queryKey: false }); -const store = configureStore(window.__INITIAL_STATE__); +const store = configureStore(window.__INITIAL_STATE__, { history }); const node = ; const $target = document.getElementById('mount'); diff --git a/common/store/configureStore.dev.js b/common/store/configureStore.dev.js index 54054e9..49748d3 100644 --- a/common/store/configureStore.dev.js +++ b/common/store/configureStore.dev.js @@ -2,16 +2,28 @@ import {applyMiddleware, createStore, compose} from 'redux'; import instance from './'; import reducers from '../modules'; import thunk from 'redux-thunk'; +import {syncHistory} from 'redux-simple-router'; import DevTools from '../components/DevTools'; -export default function configureStore(initialState) { +/** + * @param {object} initialState + * @param {object} drivers Used to inject dependencies + * @param {object} drivers.history History instance + */ +export default function configureStore(initialState, {history}) { + const reduxRouterMiddleware = syncHistory(history); const createStoreWithMiddleware = compose( - applyMiddleware(thunk), + applyMiddleware(thunk, reduxRouterMiddleware), DevTools.instrument() ); const finalCreateStore = createStoreWithMiddleware(createStore); const store = finalCreateStore(reducers, initialState); + // Required for redux-simple-router to replay actions from devtools to work + if ( process.env.REDUX_DEVTOOLS ) { + reduxRouterMiddleware.listenForReplays(store); + } + instance.set(store); return store; diff --git a/common/store/configureStore.prod.js b/common/store/configureStore.prod.js index 5ac6dfb..b68e7d0 100644 --- a/common/store/configureStore.prod.js +++ b/common/store/configureStore.prod.js @@ -2,10 +2,18 @@ import {applyMiddleware, createStore, compose} from 'redux'; import instance from './'; import reducers from '../modules'; import thunk from 'redux-thunk'; +import {syncHistory} from 'redux-simple-router'; -export default function configureStore(initialState) { - const createStoreWithMiddleware = compose( - applyMiddleware(thunk) +/** + * @param {object} initialState + * @param {object} drivers Used to inject dependencies + * @param {object} drivers.history History instance + */ +export default function configureStore(initialState, {history}) { + const reduxRouterMiddleware = syncHistory(history); + const createStoreWithMiddleware = applyMiddleware( + thunk, + reduxRouterMiddleware ); const finalCreateStore = createStoreWithMiddleware(createStore); const store = finalCreateStore(reducers, initialState); diff --git a/common/views/Root.dev.jsx b/common/views/Root.dev.jsx index 154fd8e..a23c72d 100644 --- a/common/views/Root.dev.jsx +++ b/common/views/Root.dev.jsx @@ -2,18 +2,11 @@ import React, { PropTypes } from 'react'; import {Provider} from 'react-redux'; import {Router} from 'react-router'; -import {syncReduxAndRouter} from 'redux-simple-router'; import routes from '../routes'; import Helmet from 'react-helmet'; import DevTools from '../components/DevTools'; class Root extends React.Component { - constructor(props, context) { - super(props, context); - - this.bootstrapReduxRouter(); - } - render() { return (
@@ -35,10 +28,6 @@ class Root extends React.Component { renderDevTools() { return _REDUX_DEVTOOLS_ ? : null; } - - bootstrapReduxRouter() { - syncReduxAndRouter(this.props.history, this.props.store); - } } Root.propTypes = { diff --git a/common/views/Root.prod.jsx b/common/views/Root.prod.jsx index a4c9bf7..b0938ca 100644 --- a/common/views/Root.prod.jsx +++ b/common/views/Root.prod.jsx @@ -2,17 +2,10 @@ import React, { PropTypes } from 'react'; import {Provider} from 'react-redux'; import {Router} from 'react-router'; -import {syncReduxAndRouter} from 'redux-simple-router'; import routes from '../routes'; import Helmet from 'react-helmet'; class Root extends React.Component { - constructor(props, context) { - super(props, context); - - this.bootstrapReduxRouter(); - } - render() { return (
@@ -26,10 +19,6 @@ class Root extends React.Component {
); } - - bootstrapReduxRouter() { - syncReduxAndRouter(this.props.history, this.props.store); - } } Root.propTypes = { diff --git a/common/views/home/index.jsx b/common/views/home/index.jsx index fc37a35..6c176b8 100644 --- a/common/views/home/index.jsx +++ b/common/views/home/index.jsx @@ -11,6 +11,8 @@ class HomeView extends React.Component { } render() { + console.log(this.props); + return (
Clicks: {this.props.counter} @@ -33,9 +35,7 @@ HomeView.propTypes = { }; function mapStateToProps (state) { - return { - counter: state.counter - }; + return state; } function mapDispatchToProps (dispatch) { diff --git a/package.json b/package.json index d4a5493..a8bed85 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "react-resolver": "^2.0.5", "react-router": "^1.0.0", "redux": "^3.0.4", - "redux-simple-router": "^1.0.2", + "redux-simple-router": "^2.0.3", "redux-thunk": "^1.0.0", "url-join": "0.0.1" }, diff --git a/server/middlewares/app.js b/server/middlewares/app.js index 50aabb5..6642314 100644 --- a/server/middlewares/app.js +++ b/server/middlewares/app.js @@ -16,7 +16,7 @@ const htmlRegex = /\${html}/g; export default function *appMiddleware() { const history = createMemoryHistory(); - const store = configureStore(); + const store = configureStore(null, { history }); match({ routes, location: this.request.url }, (err, redirect, props) => { if ( err ) {