diff --git a/templates/ReactReduxSpa/ClientApp/boot-server.tsx b/templates/ReactReduxSpa/ClientApp/boot-server.tsx index 93d818f..3d9241a 100644 --- a/templates/ReactReduxSpa/ClientApp/boot-server.tsx +++ b/templates/ReactReduxSpa/ClientApp/boot-server.tsx @@ -2,7 +2,7 @@ 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'; @@ -10,31 +10,28 @@ import configureStore from './configureStore'; export default createServerRenderer(params => { return new Promise((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 = ( - + ); - - // 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({ diff --git a/templates/ReactReduxSpa/ClientApp/components/Counter.tsx b/templates/ReactReduxSpa/ClientApp/components/Counter.tsx index f56cb4b..da275fb 100644 --- a/templates/ReactReduxSpa/ClientApp/components/Counter.tsx +++ b/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 { public render() { @@ -22,7 +25,7 @@ class Counter extends React.Component { } // Wire up the React component to the Redux store -export default connect>( +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; \ No newline at end of file diff --git a/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx b/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx index e6380b2..dd8a7f4 100644 --- a/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx +++ b/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx @@ -67,7 +67,7 @@ class FetchData extends React.Component { } } -export default connect( +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; diff --git a/templates/ReactReduxSpa/ClientApp/components/Home.tsx b/templates/ReactReduxSpa/ClientApp/components/Home.tsx index d21063a..c79e5de 100644 --- a/templates/ReactReduxSpa/ClientApp/components/Home.tsx +++ b/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, {}> { public render() { return

Hello, world!

diff --git a/templates/ReactReduxSpa/ClientApp/configureStore.ts b/templates/ReactReduxSpa/ClientApp/configureStore.ts index ed1f551..251aced 100644 --- a/templates/ReactReduxSpa/ClientApp/configureStore.ts +++ b/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); diff --git a/templates/ReactReduxSpa/package.json b/templates/ReactReduxSpa/package.json index d4e4052..5d956ed 100644 --- a/templates/ReactReduxSpa/package.json +++ b/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", diff --git a/templates/ReactSpa/ClientApp/boot.tsx b/templates/ReactSpa/ClientApp/boot.tsx index e1cd9f9..1d15e40 100644 --- a/templates/ReactSpa/ClientApp/boot.tsx +++ b/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( - , + , document.getElementById('react-app') ); diff --git a/templates/ReactSpa/webpack.config.vendor.js b/templates/ReactSpa/webpack.config.vendor.js index c8eacdb..11fc2a6 100644 --- a/templates/ReactSpa/webpack.config.vendor.js +++ b/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'),