Simplifications in ReactSpa and ReactReduxSpa

Author: SteveSandersonMS

templates/ReactReduxSpa/ClientApp/boot-server.tsx

@@ -2,39 +2,36 @@ import * as React from 'react';
 import { Provider } from 'react-redux';
 import { renderToString } from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom';
-import { replace } from "react-router-redux";
+import { replace } from 'react-router-redux';
 import { createMemoryHistory } from 'history';
 import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
 import routes from './routes';
 import configureStore from './configureStore';
 
 export default createServerRenderer(params => {
     return new Promise<RenderResult>((resolve, reject) => {
-        // Create memory history to use in the Redux store
-        const history = createMemoryHistory();
-        const store = configureStore(history);
-
-        // Dispatch the current location so that the router knows where to go
+        // Prepare Redux store with in-memory history, and dispatch a navigation event
+        // corresponding to the incoming URL
+        const store = configureStore(createMemoryHistory());
         store.dispatch(replace(params.location));
 
-        const context : any = {};
-
+        // Prepare an instance of the application and perform an inital render that will
+        // cause any async tasks (e.g., data access) to begin
+        const routerContext: any = {};
         const app = (
             <Provider store={ store }>
-                <StaticRouter context={ context } location={ params.location.path } children={ routes } />
+                <StaticRouter context={ routerContext } location={ params.location.path } children={ routes } />
             </Provider>
         );
-
-        // Perform an initial render that will cause any async tasks (e.g., data access) to begin
         renderToString(app);
 
-        // If there's a redirection, just send this information back to the host application (Maybe improve this?)
-        if (context.url) {
-            resolve({ redirectUrl: context.url });
+        // If there's a redirection, just send this information back to the host application
+        if (routerContext.url) {
+            resolve({ redirectUrl: routerContext.url });
             return;
         }
 
-        // Once the tasks are done, we can perform the final render
+        // Once any async tasks are done, we can perform the final render
         // We also send the redux store state, so the client can continue execution where the server left off
         params.domainTasks.then(() => {
             resolve({

templates/ReactReduxSpa/ClientApp/components/Counter.tsx

@@ -5,7 +5,10 @@ import { ApplicationState }  from '../store';
 import * as CounterStore from '../store/Counter';
 import * as WeatherForecasts from '../store/WeatherForecasts';
 
-type CounterProps = CounterStore.CounterState & typeof CounterStore.actionCreators;
+type CounterProps =
+    CounterStore.CounterState
+    & typeof CounterStore.actionCreators
+    & RouteComponentProps<{}>;
 
 class Counter extends React.Component<CounterProps, {}> {
     public render() {
@@ -22,7 +25,7 @@ class Counter extends React.Component<CounterProps, {}> {
 }
 
 // Wire up the React component to the Redux store
-export default connect<CounterStore.CounterState, {}, RouteComponentProps<{}>>(
+export default connect(
     (state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props
     CounterStore.actionCreators                 // Selects which action creators are merged into the component's props
-)(Counter);
+)(Counter) as typeof Counter;

templates/ReactReduxSpa/ClientApp/components/FetchData.tsx

@@ -67,7 +67,7 @@ class FetchData extends React.Component<WeatherForecastProps, {}> {
     }
 }
 
-export default connect<WeatherForecastsState.WeatherForecastsState, {}, WeatherForecastProps>(
+export default connect(
     (state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props
     WeatherForecastsState.actionCreators                 // Selects which action creators are merged into the component's props
-)(FetchData);
+)(FetchData) as typeof FetchData;

templates/ReactReduxSpa/ClientApp/components/Home.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 
-export default class Home extends React.Component<{}, {}> {
+export default class Home extends React.Component<RouteComponentProps<{}>, {}> {
     public render() {
         return <div>
             <h1>Hello, world!</h1>

templates/ReactReduxSpa/ClientApp/configureStore.ts

@@ -9,9 +9,8 @@ export default function configureStore(history: History, initialState?: Store.Ap
     const windowIfDefined = typeof window === 'undefined' ? null : window as any;
     // If devTools is installed, connect to it
     const devToolsExtension = windowIfDefined && windowIfDefined.devToolsExtension as () => GenericStoreEnhancer;
-    const middlewares = [thunk, routerMiddleware(history)];
     const createStoreWithMiddleware = compose(
-        applyMiddleware(...middlewares),
+        applyMiddleware(thunk, routerMiddleware(history)),
         devToolsExtension ? devToolsExtension() : f => f
     )(createStore);
 

templates/ReactReduxSpa/package.json

@@ -7,7 +7,7 @@
     "@types/react-dom": "^0.14.14",
     "@types/react-redux": "^4.4.29",
     "@types/react-router-dom": "^4.0.3",
-    "@types/react-router-redux": "^5.0.0",
+    "@types/react-router-redux": "5.0.1",
     "@types/redux": "3.5.27",
     "@types/webpack": "^2.2.0",
     "@types/webpack-env": "^1.13.0",
@@ -33,7 +33,7 @@
     "react-dom": "~15.4.0",
     "react-redux": "^4.4.5",
     "react-router-dom": "^4.1.0",
-    "react-router-redux": "^5.0.0-alpha.5",
+    "react-router-redux": "5.0.0-alpha.6",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0",
     "style-loader": "^0.13.0",

templates/ReactSpa/ClientApp/boot.tsx

@@ -2,12 +2,12 @@ import './css/site.css';
 import 'bootstrap';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import routes from './routes';
 
 // 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(
-    <Router children={ routes } />,
+    <BrowserRouter children={ routes } />,
     document.getElementById('react-app')
 );

templates/ReactSpa/webpack.config.vendor.js

@@ -17,7 +17,7 @@ module.exports = (env) => {
             ]
         },
         entry: {
-            vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', 'jquery'],
+            vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router-dom', 'jquery'],
         },
         output: {
             path: path.join(__dirname, 'wwwroot', 'dist'),