Update React MusicStore sample to use current technologies (TypeScript 2, .NET Core 1.0.1, etc.). Fixes #417

samples/react/MusicStore/ReactApp/boot-server.tsx

@@ -5,19 +5,29 @@ import { match, RouterContext } from 'react-router';
 import createMemoryHistory from 'history/lib/createMemoryHistory';
 import { routes } from './routes';
 import configureStore from './configureStore';
-React;
+type BootResult = { html?: string, globals?: { [key: string]: any }, redirectUrl?: string};
 
 export default function (params: any): Promise<{ html: string }> {
-    return new Promise<{ html: string, globals: { [key: string]: any } }>((resolve, reject) => {
+    return new Promise<BootResult>((resolve, reject) => {
         // Match the incoming request against the list of client-side routes
         match({ routes, location: params.location }, (error, redirectLocation, renderProps: any) => {
             if (error) {
                 throw error;
             }
 
+            // If there's a redirection, just send this information back to the host application
+            if (redirectLocation) {
+                resolve({ redirectUrl: redirectLocation.pathname });
+                return;
+            }
+
+            // If it didn't match any route, renderProps will be undefined
+            if (!renderProps) {
+                throw new Error(`The location '${ params.url }' doesn't match any route configured in react-router.`);
+            }
+
             // Build an instance of the application
-            const history = createMemoryHistory(params.url);
-            const store = configureStore(history);
+            const store = configureStore();
             const app = (
                 <Provider store={ store }>
                     <RouterContext {...renderProps} />

samples/react/MusicStore/ReactApp/boot.tsx

@@ -1,21 +1,25 @@
+import './styles/styles.css';
+import 'bootstrap/dist/css/bootstrap.css';
+
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { browserHistory, Router } from 'react-router';
 import { Provider } from 'react-redux';
-React; // Need this reference otherwise TypeScript doesn't think we're using it and ignores the import
-
-import './styles/styles.css';
-import 'bootstrap/dist/css/bootstrap.css';
-import configureStore from './configureStore';
+import { syncHistoryWithStore } from 'react-router-redux';
 import { routes } from './routes';
+import configureStore from './configureStore';
 import { ApplicationState }  from './store';
 
+// Get the application-wide store instance, prepopulating with state from the server where available.
 const initialState = (window as any).initialReduxState as ApplicationState;
-const store = configureStore(browserHistory, initialState);
+const store = configureStore(initialState);
+const history = syncHistoryWithStore(browserHistory, store);
 
+// This code starts up the React app when it runs in a browser. It sets up the routing configuration
+// and injects the app into a DOM element.
 ReactDOM.render(
     <Provider store={ store }>
-        <Router history={ browserHistory } children={ routes } />
+        <Router history={ history } children={ routes } />
     </Provider>,
     document.getElementById('react-app')
 );

samples/react/MusicStore/ReactApp/configureStore.ts

@@ -1,28 +1,22 @@
-import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
-import * as thunkModule from 'redux-thunk';
-import { syncHistory, routeReducer } from 'react-router-redux';
+import { createStore, applyMiddleware, compose, combineReducers, GenericStoreEnhancer } from 'redux';
+import thunk from 'redux-thunk';
+import { routerReducer } from 'react-router-redux';
 import * as Store from './store';
 import { typedToPlain } from 'redux-typed';
 
-export default function configureStore(history: HistoryModule.History, initialState?: Store.ApplicationState) {
-    // Build middleware
-    const thunk = (thunkModule as any).default; // Workaround for TypeScript not importing thunk module as expected
-    const reduxRouterMiddleware = syncHistory(history);
-    const middlewares = [thunk, reduxRouterMiddleware, typedToPlain];
-    const devToolsExtension = null;//(window as any).devToolsExtension; // If devTools is installed, connect to it
-
-    const finalCreateStore = compose(
-        applyMiddleware(...middlewares),
+export default function configureStore(initialState?: Store.ApplicationState) {
+    // Build middleware. These are functions that can process the actions before they reach the store.
+    const windowIfDefined = typeof window === 'undefined' ? null : window as any;
+    // If devTools is installed, connect to it
+    const devToolsExtension = windowIfDefined && windowIfDefined.devToolsExtension as () => GenericStoreEnhancer;
+    const createStoreWithMiddleware = compose(
+        applyMiddleware(thunk, typedToPlain),
         devToolsExtension ? devToolsExtension() : f => f
-    )(createStore)
+    )(createStore);
 
-    // Combine all reducers
+    // Combine all reducers and instantiate the app-wide store instance
     const allReducers = buildRootReducer(Store.reducers);
-
-    const store = finalCreateStore(allReducers, initialState) as Redux.Store;
-
-    // Required for replaying actions from devtools to work
-    reduxRouterMiddleware.listenForReplays(store);
+    const store = createStoreWithMiddleware(allReducers, initialState) as Redux.Store<Store.ApplicationState>;
 
     // Enable Webpack hot module replacement for reducers
     if (module.hot) {
@@ -36,5 +30,5 @@ export default function configureStore(history: HistoryModule.History, initialSt
 }
 
 function buildRootReducer(allReducers) {
-    return combineReducers(Object.assign({}, allReducers, { routing: routeReducer })) as Redux.Reducer;
+    return combineReducers<Store.ApplicationState>(Object.assign({}, allReducers, { routing: routerReducer }));
 }