feat(core): init store with sync location reducer

Author: justingreenberg

src/containers/AppContainer.js

@@ -1,21 +1,24 @@
 import React, { Component, PropTypes } from 'react'
-import { Router } from 'react-router'
+import { browserHistory, Router } from 'react-router'
 import { Provider } from 'react-redux'
 
 class AppContainer extends Component {
   static propTypes = {
-    history : PropTypes.object.isRequired,
-    routes  : PropTypes.object.isRequired,
-    store   : PropTypes.object.isRequired
+    routes : PropTypes.object.isRequired,
+    store  : PropTypes.object.isRequired
+  }
+
+  shouldComponentUpdate () {
+    return false
   }
 
   render () {
-    const { history, routes, store } = this.props
+    const { routes, store } = this.props
 
     return (
       <Provider store={store}>
         <div style={{ height: '100%' }}>
-          <Router history={history} children={routes} />
+          <Router history={browserHistory} children={routes} />
         </div>
       </Provider>
     )

src/main.js

@@ -1,11 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { browserHistory } from 'react-router'
 import createStore from './store/createStore'
 import AppContainer from './containers/AppContainer'
 
 // ========================================================
-// Store and History Instantiation
+// Store Instantiation
 // ========================================================
 const initialState = window.___INITIAL_STATE__
 const store = createStore(initialState)
@@ -19,11 +18,7 @@ let render = () => {
   const routes = require('./routes/index').default(store)
 
   ReactDOM.render(
-    <AppContainer
-      store={store}
-      history={browserHistory}
-      routes={routes}
-    />,
+    <AppContainer store={store} routes={routes} />,
     MOUNT_NODE
   )
 }
@@ -58,12 +53,12 @@ if (__DEV__) {
     }
 
     // Setup hot module replacement
-    module.hot.accept('./routes/index', () => {
-      setTimeout(() => {
+    module.hot.accept('./routes/index', () =>
+      setImmediate(() => {
         ReactDOM.unmountComponentAtNode(MOUNT_NODE)
         render()
       })
-    })
+    )
   }
 }
 

src/store/createStore.js

@@ -1,6 +1,8 @@
 import { applyMiddleware, compose, createStore } from 'redux'
 import thunk from 'redux-thunk'
+import { browserHistory } from 'react-router'
 import makeRootReducer from './reducers'
+import { updateLocation } from './location'
 
 export default (initialState = {}) => {
   // ======================================================
@@ -32,6 +34,9 @@ export default (initialState = {}) => {
   )
   store.asyncReducers = {}
 
+  // To unsubscribe, invoke `store.unsubscribeHistory()` anytime
+  store.unsubscribeHistory = browserHistory.listen(updateLocation(store))
+
   if (module.hot) {
     module.hot.accept('./reducers', () => {
       const reducers = require('./reducers').default

src/store/location.js

@@ -0,0 +1,31 @@
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const LOCATION_CHANGE = 'LOCATION_CHANGE'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export function locationChange (location = '/') {
+  return {
+    type    : LOCATION_CHANGE,
+    payload : location
+  }
+}
+
+// ------------------------------------
+// Specialized Action Creator
+// ------------------------------------
+export const updateLocation = ({ dispatch }) => {
+  return (nextLocation) => dispatch(locationChange(nextLocation))
+}
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+const initialState = null
+export default function locationReducer (state = initialState, action) {
+  return action.type === LOCATION_CHANGE
+    ? action.payload
+    : state
+}

src/store/reducers.js

@@ -1,7 +1,12 @@
 import { combineReducers } from 'redux'
+import locationReducer from './location'
 
+// ========================================================
+// Render Setup
+// ========================================================
 export const makeRootReducer = (asyncReducers) => {
   return combineReducers({
+    location: locationReducer,
     ...asyncReducers
   })
 }

tests/store/createStore.spec.js

@@ -0,0 +1,31 @@
+import {
+  default as createStore
+} from 'store/createStore'
+
+describe('(Store) createStore', () => {
+  let store
+
+  before(() => {
+    store = createStore()
+  })
+
+  it('should have an empty asyncReducers object', () => {
+    expect(store.asyncReducers).to.be.an('object')
+    expect(store.asyncReducers).to.be.empty
+  })
+
+  describe('(Location)', () => {
+    it('store should be initialized with Location state', () => {
+      const location = {
+        pathname : '/echo'
+      }
+      store.dispatch({
+        type    : 'LOCATION_CHANGE',
+        payload : location
+      })
+      const locationState = store.getState().location
+      expect(store.getState().location).to.deep.equal(location)
+    })
+  })
+
+})

tests/store/location.spec.js

@@ -0,0 +1,90 @@
+import {
+  LOCATION_CHANGE,
+  locationChange,
+  updateLocation,
+  default as locationReducer
+} from 'store/location'
+
+describe('(Internal Module) Location', () => {
+  it('Should export a constant LOCATION_CHANGE.', () => {
+    expect(LOCATION_CHANGE).to.equal('LOCATION_CHANGE')
+  })
+
+  describe('(Reducer)', () => {
+    it('Should be a function.', () => {
+      expect(locationReducer).to.be.a('function')
+    })
+
+    it('Should initialize with a state of null.', () => {
+      expect(locationReducer(undefined, {})).to.equal(null)
+    })
+
+    it('Should return the previous state if an action was not matched.', () => {
+      let state = locationReducer(undefined, {})
+      expect(state).to.equal(null)
+      state = locationReducer(state, { type: '@@@@@@@' })
+      expect(state).to.equal(null)
+
+      const locationState = { pathname: '/yup' }
+      state = locationReducer(state, locationChange(locationState))
+      expect(state).to.equal(locationState)
+      state = locationReducer(state, { type: '@@@@@@@' })
+      expect(state).to.equal(locationState)
+    })
+  })
+
+  describe('(Action Creator) locationChange', () => {
+    it('Should be exported as a function.', () => {
+      expect(locationChange).to.be.a('function')
+    })
+
+    it('Should return an action with type "LOCATION_CHANGE".', () => {
+      expect(locationChange()).to.have.property('type', LOCATION_CHANGE)
+    })
+
+    it('Should assign the first argument to the "payload" property.', () => {
+      const locationState = { pathname: '/yup' }
+      expect(locationChange(locationState)).to.have.property('payload', locationState)
+    })
+
+    it('Should default the "payload" property to "/" if not provided.', () => {
+      expect(locationChange()).to.have.property('payload', '/')
+    })
+  })
+
+  describe('(Specialized Action Creator) updateLocation', () => {
+    let _globalState
+    let _dispatchSpy
+    let _getStateSpy
+
+    beforeEach(() => {
+      _globalState = {
+        location : locationReducer(undefined, {})
+      }
+      _dispatchSpy = sinon.spy((action) => {
+        _globalState = {
+          ..._globalState,
+          location : locationReducer(_globalState.location, action)
+        }
+      })
+      _getStateSpy = sinon.spy(() => {
+        return _globalState
+      })
+
+    })
+
+    it('Should be exported as a function.', () => {
+      expect(updateLocation).to.be.a('function')
+    })
+
+    it('Should return a function (is a thunk).', () => {
+      expect(updateLocation({ dispatch: _dispatchSpy })).to.be.a('function')
+    })
+
+    it('Should call dispatch exactly once.', () => {
+      const update = updateLocation({ dispatch: _dispatchSpy })('/')
+      expect(_dispatchSpy.should.have.been.calledOnce)
+    })
+  })
+
+})

tests/test-bundler.js

@@ -32,6 +32,6 @@ const testsToRun = testsContext.keys().filter(inManifest)
 
 // require all `src/**/*.js` except for `main.js` (for isparta coverage reporting)
 if (__COVERAGE__) {
-  const componentsContext = require.context('../src/', true, /^((?!main).)*\.js$/)
+  const componentsContext = require.context('../src/', true, /^((?!main|reducers).)*\.js$/)
   componentsContext.keys().forEach(componentsContext)
 }