github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-25 11:07:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove 'redux-typed' from ReactReduxSpa template, making it more standard as a Redux application

Browse Source
This commit is contained in:
SteveSandersonMS
2016-11-11 15:32:51 -08:00
parent cdd6c16dc6
commit 9b048c54d4
10 changed files with 89 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
templates/ReactReduxSpa/ClientApp/components/Counter.tsx
View File

@@ -1,8 +1,11 @@
import * as React from 'react';
import { Link } from 'react-router';
import { provide } from 'redux-typed';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as CounterStore from '../store/Counter';
import * as WeatherForecasts from '../store/WeatherForecasts';
type CounterProps = CounterStore.CounterState & typeof CounterStore.actionCreators;
class Counter extends React.Component<CounterProps, void> {
public render() {
@@ -18,10 +21,8 @@ class Counter extends React.Component<CounterProps, void> {
}
}
// Build the CounterProps type, which allows the component to be strongly typed
const provider = provide(
(state: ApplicationState) => state.counter, // Select which part of global state maps to this component
CounterStore.actionCreators // Select which action creators should be exposed to this component
);
type CounterProps = typeof provider.allProps;
export default provider.connect(Counter);
// Wire up the React component to the Redux store
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);

27
templates/ReactReduxSpa/ClientApp/components/FetchData.tsx
View File

@@ -1,20 +1,22 @@
import * as React from 'react';
import { Link } from 'react-router';
import { provide } from 'redux-typed';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as WeatherForecastsState from '../store/WeatherForecasts';
interface RouteParams {
startDateIndex: string;
}
// At runtime, Redux will merge together...
type WeatherForecastProps =
WeatherForecastsState.WeatherForecastsState // ... state we've requested from the Redux store
& typeof WeatherForecastsState.actionCreators // ... plus action creators we've requested
& { params: { startDateIndex: string } }; // ... plus incoming routing parameters
class FetchData extends React.Component<WeatherForecastProps, void> {
componentWillMount() {
// This method runs when the component is first added to the page
// This method runs when the component is first added to the page
let startDateIndex = parseInt(this.props.params.startDateIndex) || 0;
this.props.requestWeatherForecasts(startDateIndex);
}
componentWillReceiveProps(nextProps: WeatherForecastProps) {
// This method runs when incoming props (e.g., route params) change
let startDateIndex = parseInt(nextProps.params.startDateIndex) || 0;
@@ -52,7 +54,7 @@ class FetchData extends React.Component<WeatherForecastProps, void> {
</tbody>
</table>;
}
private renderPagination() {
let prevStartDateIndex = this.props.startDateIndex - 5;
let nextStartDateIndex = this.props.startDateIndex + 5;
@@ -65,10 +67,7 @@ class FetchData extends React.Component<WeatherForecastProps, void> {
}
}
// Build the WeatherForecastProps type, which allows the component to be strongly typed
const provider = provide(
(state: ApplicationState) => state.weatherForecasts, // Select which part of global state maps to this component
WeatherForecastsState.actionCreators // Select which action creators should be exposed to this component
).withExternalProps<{ params: RouteParams }>(); // Also include a 'params' property on WeatherForecastProps
type WeatherForecastProps = typeof provider.allProps;
export default provider.connect(FetchData);
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);

2
templates/ReactReduxSpa/ClientApp/components/Home.tsx
View File

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

2
templates/ReactReduxSpa/ClientApp/components/NavMenu.tsx
View File

@@ -1,7 +1,7 @@
import * as React from 'react';
import { Link } from 'react-router';
export class NavMenu extends React.Component<any, void> {
export class NavMenu extends React.Component<void, void> {
public render() {
return <div className='main-nav'>
<div className='navbar navbar-inverse'>