simplify props with withRouter

This commit is contained in:
Jeff Colombo 2019-03-20 21:36:20 -04:00
parent ea3d340dc2
commit c2f48865b7
5 changed files with 9 additions and 36 deletions

File diff suppressed because one or more lines are too long

6
dist/main-bundle.js vendored

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router-dom'; import { RouteComponentProps, withRouter } from 'react-router-dom';
import classNames from 'classnames'; import classNames from 'classnames';
@ -127,9 +127,6 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
attackTypeEffectiveness={ attackTypeEffectiveness } attackTypeEffectiveness={ attackTypeEffectiveness }
combatMoves={ combatMoves } combatMoves={ combatMoves }
toggleInterruption={ this.handleToggleInterruption } toggleInterruption={ this.handleToggleInterruption }
history={ this.props.history }
location={ this.props.location }
match={ this.props.match }
/> />
<Footer /> <Footer />
</div> </div>
@ -194,20 +191,4 @@ const mapStateToProps = (state : PokemonAppProps) : PokemonAppProps => {
}; };
}; };
const mapDispatchToProps = (dispatch : IPokemonAppDispatch['dispatch']) : IPokemonAppDispatch => { export const ConnectedPokemonApp = withRouter(connect(mapStateToProps)(PokemonApp));
return {
dispatch
};
};
const mergeProps = (state : PokemonAppProps, dispatchProps : IPokemonAppDispatch, ownProps : IRouterProps) : IConnectedPokemonAppProps => {
return {
...state,
...dispatchProps,
history: ownProps.history,
location: ownProps.location,
match: ownProps.match,
};
};
export const ConnectedPokemonApp = connect(mapStateToProps, mapDispatchToProps, mergeProps)(PokemonApp);

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router-dom'; import { RouteComponentProps, withRouter } from 'react-router-dom';
import classNames from 'classnames'; import classNames from 'classnames';
@ -30,7 +30,6 @@ import * as PVPogoProtos from 'common/models/PVPogoProtos';
import * as styles from 'app/styles/PokemonApp.scss'; import * as styles from 'app/styles/PokemonApp.scss';
// TODO: better way to expose IRouterProps than just passing them in???
interface IPokemonExplorerProps extends IRouterProps { interface IPokemonExplorerProps extends IRouterProps {
isOverlaid : boolean; isOverlaid : boolean;
attackTypeEffectiveness : AttackTypeEffectiveness; attackTypeEffectiveness : AttackTypeEffectiveness;
@ -327,10 +326,7 @@ const mergeProps = (state : IPokemonExplorerStore, dispatchProps : IPokemonExplo
...state, ...state,
...dispatchProps, ...dispatchProps,
...ownProps, ...ownProps,
history: ownProps.history,
location: ownProps.location,
match: ownProps.match,
}; };
}; };
export const ConnectedPokemonExplorer = connect(mapStateToProps, mapDispatchToProps, mergeProps)(PokemonExplorer); export const ConnectedPokemonExplorer = withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(PokemonExplorer));

View File

@ -39,11 +39,7 @@ const store = Redux.createStore(
const renderRoutePokemonApp = (props : IRouterProps) => { const renderRoutePokemonApp = (props : IRouterProps) => {
routePokemonApp(props, store.dispatch); routePokemonApp(props, store.dispatch);
return ( return (
<ConnectedPokemonApp <ConnectedPokemonApp />
history={ props.history }
location={ props.location }
match={ props.match }
/>
); );
}; };