Use react-redux hooks in Shuffle

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) => (
-  <ContextMenuWraper
-    renderContents={() => (
-      <Node
-        checked={shuffle}
-        label="Shuffle"
+const Shuffle = React.memo(() => {
+  const shuffle = useTypedSelector(Selectors.getShuffle);
+  const handleClick = useActionCreator(Actions.toggleShuffle);
+  return (
+    <ContextMenuWraper
+      renderContents={() => (
+        <Node
+          checked={shuffle}
+          label="Shuffle"
+          onClick={handleClick}
+          hotkey="(S)"
+        />
+      )}
+    >
+      <div
+        id="shuffle"
+        className={classnames({ selected: shuffle })}
         onClick={handleClick}
-        hotkey="(S)"
+        title="Toggle Shuffle"
       />
-    )}
-  >
-    <div
-      id="shuffle"
-      className={classnames({ selected: shuffle })}
-      onClick={handleClick}
-      title="Toggle Shuffle"
-    />
-  </ContextMenuWraper>
-);
-
-const mapStateToProps = (state: AppState): StateProps => ({
-  shuffle: state.media.shuffle,
+    </ContextMenuWraper>
+  );
 });
 
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
-  handleClick: () => dispatch(toggleShuffle()),
-});
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Shuffle);
+export default Shuffle;