8000 Simplifications in ReactSpa and ReactReduxSpa · aspnet/JavaScriptServices@e658ee6 · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Commit e658ee6

Browse files
SteveSandersonMSSteveSandersonMS
committed
Simplifications in ReactSpa and ReactReduxSpa
1 parent 785e7d4 commit e658ee6

File tree

8 files changed

+28
-28
lines changed

8 files changed

+28
-28
lines changed

‎templates/ReactReduxSpa/ClientApp/boot-server.tsx

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,36 @@ import * as React from 'react';
22
import { Provider } from 'react-redux';
33
import { renderToString } from 'react-dom/server';
44
import { StaticRouter } from 'react-router-dom';
5-
import { replace } from "react-router-redux";
5+
import { replace } from 'react-router-redux';
66
import { createMemoryHistory } from 'history';
77
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
88
import routes from './routes';
99
import configureStore from './configureStore';
1010

1111
export default createServerRenderer(params => {
1212
return new Promise<RenderResult>((resolve, reject) => {
13-
// Create memory history to use in the Redux store
14-
const history = createMemoryHistory();
15-
const store = configureStore(history);
16-
17-
// Dispatch the current location so that the router knows where to go
13+
// Prepare Redux store with in-memory history, and dispatch a navigation event
14+
// corresponding to the incoming URL
15+
const store = configureStore(createMemoryHistory());
1816
store.dispatch(replace(params.location));
1917

20-
const context : any = {};
21-
8000 18+
// Prepare an instance of the application and perform an inital render that will
19+
// cause any async tasks (e.g., data access) to begin
20+
const routerContext: any = {};
2221
const app = (
2322
<Provider store={ store }>
24-
<StaticRouter context={ context } location={ params.location.path } children={ routes } />
23+
<StaticRouter context={ routerContext } location={ params.location.path } children={ routes } />
2524
</Provider>
2625
);
27-
28-
// Perform an initial render that will cause any async tasks (e.g., data access) to begin
2926
renderToString(app);
3027

31-
// If there's a redirection, just send this information back to the host application (Maybe improve this?)
32-
if (context.url) {
33-
resolve({ redirectUrl: context.url });
28+
// If there's a redirection, just send this information back to the host application
29+
if (routerContext.url) {
30+
resolve({ redirectUrl: routerContext.url });
3431
return;
3532
}
3633

37-
// Once the tasks are done, we can perform the final render
34+
// Once any async tasks are done, we can perform the final render
3835
// We also send the redux store state, so the client can continue execution where the server left off
3936
params.domainTasks.then(() => {
4037
resolve({

‎templates/ReactReduxSpa/ClientApp/components/Counter.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ import { ApplicationState } from '../store';
55
import * as CounterStore from '../store/Counter';
66
import * as WeatherForecasts from '../store/WeatherForecasts';
77

8-
type CounterProps = CounterStore.CounterState & typeof CounterStore.actionCreators;
8+
type CounterProps =
9+
CounterStore.CounterState
10+
& typeof CounterStore.actionCreators
11+
& RouteComponentProps<{}>;
912

1013
class Counter extends React.Component<CounterProps, {}> {
1114
public render() {
@@ -22,7 +25,7 @@ class Counter extends React.Component<CounterProps, {}> {
2225
}
2326

2427
// Wire up the React component to the Redux store
25-
export default connect<CounterStore.CounterState, {}, RouteComponentProps<{}>>(
28+
export default connect(
2629
(state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props
2730
CounterStore.actionCreators // Selects which action creators are merged into the component's props
28-
)(Counter);
31+
)(Counter) as typeof Counter;

‎templates/ReactReduxSpa/ClientApp/components/FetchData.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ class FetchData extends React.Component<WeatherForecastProps, {}> {
6767
}
6868
}
6969

70-
export default connect<WeatherForecastsState.WeatherForecastsState, {}, WeatherForecastProps>(
70+
export default connect(
7171
(state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props
7272
WeatherForecastsState.actionCreators // Selects which action creators are merged into the component's props
73-
)(FetchData);
73+
)(FetchData) as typeof FetchData;

‎templates/ReactReduxSpa/ClientApp/components/Home.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
2+
import { RouteComponentProps } from 'react-router-dom';
23

3-
export default class Home extends React.Component<{}, {}> {
4+
export default class Home extends React.Component<RouteComponentProps<{}>, {}> {
45
public render() {
56
return <div>
67
<h1>Hello, world!</h1>

‎templates/ReactReduxSpa/ClientApp/configureStore.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ export default function configureStore(history: History, initialState?: Store.Ap
99
const windowIfDefined = typeof window === 'undefined' ? null : window as any;
1010
// If devTools is installed, connect to it
1111
const devToolsExtension = windowIfDefined && windowIfDefined.devToolsExtension as () => GenericStoreEnhancer;
12-
const middlewares = [thunk, routerMiddleware(history)];
1312
const createStoreWithMiddleware = compose(
14-
applyMiddleware(...middlewares),
13+
applyMiddleware(thunk, routerMiddleware(history)),
1514
devToolsExtension ? devToolsExtension() : f => f
1615
)(createStore);
1716

‎templates/ReactReduxSpa/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"@types/react-dom": "^0.14.14",
88
"@types/react-redux": "^4.4.29",
99
"@types/react-router-dom": "^4.0.3",
10-
"@types/react-router-redux": "^5.0.0",
10+
"@types/react-router-redux": "5.0.1",
1111
"@types/redux": "3.5.27",
1212
"@types/webpack": "^2.2.0",
1313
"@types/webpack-env": "^1.13.0",
@@ -33,7 +33,7 @@
3333
"react-dom": "~15.4.0",
3434
"react-redux": "^4.4.5",
3535
"react-router-dom": "^4.1.0",
36-
"react-router-redux": "^5.0.0-alpha.5",
36+
"react-router-redux": "5.0.0-alpha.6",
3737
"redux": "^3.6.0",
3838
"redux-thunk": "^2.2.0",
3939
"style-loader": "^0.13.0",

‎templates/ReactSpa/ClientApp/boot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import './css/site.css';
22
import 'bootstrap';
33
import * as React from 'react';
44
import * as ReactDOM from 'react-dom';
5-
import { BrowserRouter as Router } from 'react-router-dom';
5+
import { BrowserRouter } from 'react-router-dom';
66
import routes from './routes';
77

88
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
99
// and injects the app into a DOM element.
1010
ReactDOM.render(
11-
<Router children={ routes } />,
11+
<BrowserRouter children={ routes } />,
1212
document.getElementById('react-app')
1313
);

‎templates/ReactSpa/webpack.config.vendor.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ module.exports = (env) => {
1717
]
1818
},
1919
entry: {
20-
vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', 'jquery'],
20+
vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router-dom', 'jquery'],
2121
},
2222
output: {
2323
path: path.join(__dirname, 'wwwroot', 'dist'),

0 commit comments

Comments
 (0)
0