diff --git a/js/components/MainWindow/Shuffle.tsx b/js/components/MainWindow/Shuffle.tsx index da917d33..aa3e2010 100644 --- a/js/components/MainWindow/Shuffle.tsx +++ b/js/components/MainWindow/Shuffle.tsx @@ -1,48 +1,33 @@ import React from "react"; -import { connect } from "react-redux"; import classnames from "classnames"; -import { toggleShuffle } from "../../actionCreators"; +import * as Actions from "../../actionCreators"; +import * as Selectors from "../../selectors"; import ContextMenuWraper from "../ContextMenuWrapper"; import { Node } from "../ContextMenu"; -import { Dispatch, AppState } from "../../types"; +import { useTypedSelector, useActionCreator } from "../../hooks"; -interface StateProps { - shuffle: boolean; -} - -interface DispatchProps { - handleClick(): void; -} - -type Props = StateProps & DispatchProps; -const Shuffle = ({ shuffle, handleClick }: Props) => ( - ( - { + const shuffle = useTypedSelector(Selectors.getShuffle); + const handleClick = useActionCreator(Actions.toggleShuffle); + return ( + ( + + )} + > +
- )} - > -
- -); - -const mapStateToProps = (state: AppState): StateProps => ({ - shuffle: state.media.shuffle, + + ); }); -const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ - handleClick: () => dispatch(toggleShuffle()), -}); -export default connect( - mapStateToProps, - mapDispatchToProps -)(Shuffle); +export default Shuffle;