Use react-redux hooks in a few more places

This commit is contained in:
Jordan Eldredge 2019-08-20 07:42:54 -07:00
parent 48bd60bff7
commit 6f54b5aeab
2 changed files with 22 additions and 47 deletions

View file

@ -1,22 +1,11 @@
import React from "react";
import { connect } from "react-redux";
import * as Actions from "../../actionCreators";
import { Dispatch } from "../../types";
import { useActionCreator } from "../../hooks";
interface DispatchProps {
openMediaFileDialog(): void;
}
const Eject = (props: DispatchProps) => (
<div id="eject" onClick={props.openMediaFileDialog} title="Open File(s)" />
);
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
openMediaFileDialog: () => dispatch(Actions.openMediaFileDialog()),
const Eject = React.memo(() => {
const openMediaFileDialog = useActionCreator(Actions.openMediaFileDialog);
return <div id="eject" onClick={openMediaFileDialog} title="Open File(s)" />;
});
export default connect(
null,
mapDispatchToProps
)(Eject);
export default Eject;

View file

@ -1,39 +1,25 @@
import React from "react";
import { connect } from "react-redux";
import classnames from "classnames";
import { getWindowOpen } from "../../selectors";
import { toggleWindow } from "../../actionCreators";
import { AppState } from "../../types";
import * as Selectors from "../../selectors";
import * as Actions from "../../actionCreators";
import { useActionCreator, useTypedSelector } from "../../hooks";
interface StateProps {
windowOpen: boolean;
function toggleEqualizer() {
return Actions.toggleWindow("equalizer");
}
interface DispatchProps {
handleClick(e: React.MouseEvent<HTMLDivElement>): void;
}
type Props = StateProps & DispatchProps;
const EqToggleButton = (props: Props) => (
<div
id="equalizer-button"
className={classnames({ selected: props.windowOpen })}
onClick={props.handleClick}
title="Toggle Graphical Equalizer"
/>
);
const mapStateToProps = (state: AppState): StateProps => ({
windowOpen: getWindowOpen(state)("equalizer"),
const EqToggleButton = React.memo(() => {
const handleClick = useActionCreator(toggleEqualizer);
const windowOpen = useTypedSelector(Selectors.getWindowOpen)("equalizer");
return (
<div
id="equalizer-button"
className={classnames({ selected: windowOpen })}
onClick={handleClick}
title="Toggle Graphical Equalizer"
/>
);
});
const mapDispatchToProps = {
handleClick: () => toggleWindow("equalizer"),
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(EqToggleButton);
export default EqToggleButton;