redux使用hooks写法

Author: kongyijilafumi

src/components/layout-set/index.js

@@ -1,15 +1,16 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import MyIcon from "../icon";
 import { Button, Drawer, message, Row, Radio } from "antd";
-import { connect } from "react-redux";
-import { changeLayoutMode } from "@/store/layout/action";
-import { setVisible } from "@/store/visibel/action";
-import * as Types from "../../store/layout/actionTypes";
+import { useDispatch, useSelector } from "react-redux";
+import { setVisible as stateSetVisibel, changeLayoutMode } from "@/store/action";
+import * as Types from "@/store/layout/actionTypes";
 import { setLayoutMode, setCompVisibel as util_setCompVisibel } from "@/utils";
 import singImg from "@/assets/images/layout2.jpg";
 import twoImg from "@/assets/images/layout1.jpg";
 import twoFlanksImg from "@/assets/images/layout3.jpg";
+import { getComponentsVisible, getLayoutMode } from "@/store/getters";
 import "./index.less";
+
 const modes = [
   {
     img: singImg,
@@ -37,41 +38,27 @@ const RadioArray = [
     v: false,
   },
 ];
-const mapDispatchToProps = (dispatch) => ({
-  setMode: (mode) => dispatch(changeLayoutMode(mode)),
-  setCompVisible: (key, val) => dispatch(setVisible(key, val)),
-});
-const mapStateToProps = (state) => ({
-  layoutMode: state.layout,
-  componentsVisible: state.componentsVisible,
-});
-function useLayoutSet({ setMode, layoutMode, componentsVisible }) {
+
+export default function LayoutSet() {
   const [visible, setVisible] = useState(false);
-  const wakeup = () => setVisible(true);
-  const onClose = () => setVisible(false);
-  const setLayout = (mode) => {
-    setMode(mode);
-    message.success("布局设置成功！");
-  };
-  const saveLayout = () => {
+  // state
+  const dispatch = useDispatch()
+  const componentsVisible = useSelector(getComponentsVisible)
+  const layoutMode = useSelector(getLayoutMode)
+
+  const setMode = useCallback((mode) => dispatch(changeLayoutMode(mode)), [dispatch])
+  const wakeup = useCallback(() => setVisible(true), []);
+  const onClose = useCallback(() => setVisible(false), []);
+  const saveLayout = useCallback(() => {
     setLayoutMode(layoutMode);
     util_setCompVisibel(componentsVisible);
     message.success("布局保存本地成功！");
-  };
-
-  return {
-    wakeup,
-    visible,
-    onClose,
-    setLayout,
-    saveLayout,
-  };
-}
+  }, [layoutMode, componentsVisible]);
+  const setLayout = useCallback((mode) => {
+    setMode(mode);
+    message.success("布局设置成功！");
+  }, [setMode]);
 
-function LayoutSet(props) {
-  const { wakeup, visible, onClose, setLayout, saveLayout } =
-    useLayoutSet(props);
-  const { componentsVisible = {}, setCompVisible } = props;
   return (
     <div className="layoutset-container">
       <MyIcon type="icon_setting" onClick={wakeup} />
@@ -90,7 +77,7 @@ function LayoutSet(props) {
             <div
               key={m.mode}
               onClick={() => setLayout(m.mode)}
-              className={m.mode === props.layoutMode ? "col active" : "col"}
+              className={m.mode === layoutMode ? "col active" : "col"}
             >
               <img src={m.img} alt={m.alt}></img>
             </div>
@@ -101,7 +88,7 @@ function LayoutSet(props) {
           <Row key={key} className="visibel-list">
             {key === "footer" ? "底部：" : "顶部切换导航："}
             <Radio.Group
-              onChange={(e) => setCompVisible(key, e.target.value)}
+              onChange={(e) => dispatch(stateSetVisibel(key, e.target.value))}
               value={componentsVisible[key]}
             >
               {RadioArray.map((i) => (
@@ -121,5 +108,3 @@ function LayoutSet(props) {
     </div>
   );
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(LayoutSet);

src/components/menu-dnd/index.js

@@ -1,12 +1,14 @@
 import React, { useEffect, useState, useCallback, useMemo } from "react";
 import MyIcon from "@/components/icon";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import { message } from "antd";
 import { Link, useHistory } from "react-router-dom";
-import "./index.less";
 import ContextMenu from "../contextMenu";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { filterOpenKey } from "@/store/action";
-import { message } from "antd";
+import { getCurrentPath, getOpenedMenu } from "@/store/getters";
+import "./index.less";
+
 // 重新记录数组顺序
 const reorder = (list, startIndex, endIndex) => {
   const result = Array.from(list);
@@ -17,13 +19,17 @@ const reorder = (list, startIndex, endIndex) => {
   return result;
 };
 
-function MenuDnd({ openedMenu, filterOpenMenu, currentPath }) {
+export default function MenuDnd() {
   const history = useHistory();
   const [data, setData] = useState([]);
   const [contextMenuVisible, setVisible] = useState(false)
   const [currentItem, setCurrentItem] = useState(null)
   const [point, setPoint] = useState({ x: 0, y: 0 })
-
+  // state
+  const dispatch = useDispatch()
+  const openedMenu = useSelector(getOpenedMenu)
+  const currentPath = useSelector(getCurrentPath)
+  const filterOpenMenu = useCallback((key) => dispatch(filterOpenKey(key)), [dispatch])
 
   // 根据 选中的菜单 往里添加拖拽选项
   useEffect(() => {
@@ -202,15 +208,4 @@ function MenuDnd({ openedMenu, filterOpenMenu, currentPath }) {
       setVisible={setVisible}
     />
   </>);
-}
-const mapStateToProps = (state) => ({
-  openedMenu: state.menu.openedMenu,
-  currentPath: state.menu.currentPath
-})
-const mapDispatchToProps = (dispatch) => ({
-  filterOpenMenu: (key) => dispatch(filterOpenKey(key)),
-});
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(MenuDnd);
+}

src/layout/header.js

@@ -1,21 +1,13 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Layout, Menu, Dropdown } from "antd";
 import logo from "@/assets/images/logo.svg";
 import MyIcon from "@/components/icon/";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { getStateUser } from "@/store/getters";
 import { clearUser } from "@/store/user/action";
-import { setKey, saveToken, clearLocalDatas, } from "@/utils";
+import { clearLocalDatas } from "@/utils";
 import { USER_INFO, TOKEN, MENU, } from "@/common"
 const { Header } = Layout;
-const mapStateToProps = (state) => ({
-  userInfo: state.user,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  clearStateUser: () => {
-    dispatch(clearUser());
-  },
-});
 
 const RightMenu = ({ logout }) => (
   <Menu className="right-down">
@@ -31,16 +23,15 @@ const RightMenu = ({ logout }) => (
 
 const getPopupContainer = (HTMLElement) => HTMLElement;
 
-const LayoutHeader = ({ userInfo, clearStateUser, children }) => {
-  const logout = () => {
+const LayoutHeader = ({ children }) => {
+  const userInfo = useSelector(getStateUser)
+  const dispatch = useDispatch()
+  const clearStateUser = useCallback(() => dispatch(clearUser()), [dispatch])
+  const logout = useCallback(() => {
     clearLocalDatas([USER_INFO, TOKEN, MENU]);
-    if (userInfo) {
-      setKey(true, USER_INFO, { ...userInfo, isLogin: false });
-    }
-    saveToken();
     window.location.reload();
-    clearStateUser(userInfo);
-  };
+    clearStateUser();
+  }, [clearStateUser]);
   return (
     <Header className="header">
       <div className="logo">
@@ -60,4 +51,4 @@ const LayoutHeader = ({ userInfo, clearStateUser, children }) => {
     </Header>
   );
 };
-export default connect(mapStateToProps, mapDispatchToProps)(LayoutHeader);
+export default LayoutHeader

src/layout/index.js

@@ -1,12 +1,12 @@
 import { SingleColumn, TowColumn, TwoFlanks } from "./mode";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
 import * as ActionTypes from "../store/layout/actionTypes";
+import { getComponentsVisible, getLayoutMode } from "@/store/getters";
 import "./index.less";
-const mapStateToProps = (state) => ({
-  LayoutMode: state.layout,
-  visibel: state.componentsVisible,
-});
-function LayoutContainer({ LayoutMode, visibel }) {
+
+export default function LayoutContainer() {
+  const LayoutMode = useSelector(getLayoutMode)
+  const visibel = useSelector(getComponentsVisible)
   switch (LayoutMode) {
     case ActionTypes.SINGLE_COLUMN:
       return <SingleColumn visibel={visibel} />;
@@ -18,5 +18,3 @@ function LayoutContainer({ LayoutMode, visibel }) {
       return null;
   }
 }
-
-export default connect(mapStateToProps, null)(LayoutContainer);

src/layout/siderMenu.js

@@ -1,24 +1,15 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 import { Layout, Menu, Button, Affix, Col } from "antd";
 import MyIcon from "@/components/icon";
 import { setOpenKey } from "@/store/action";
 import { stopPropagation } from "@/utils";
 import * as layoutTypes from "@/store/layout/actionTypes";
+import { getLayoutMode, getMenuList, getOpenMenuKey, getSelectMenuKey } from "@/store/getters";
 const { Sider } = Layout;
 const { SubMenu } = Menu;
 
-const mapDispatchToProps = (dispatch) => ({
-  setOpenKeys: (val) => dispatch(setOpenKey(val)),
-});
-
-const mapStateToProps = (state) => ({
-  openKeys: state.menu.openMenuKey,
-  selectedKeys: state.menu.selectMenuKey,
-  layout: state.layout,
-  menuList: state.menu.menuList,
-});
 const SliderContent = ({ children }) => {
   const [collapsed, setCollapsed] = useState(false);
   // 折叠菜单
@@ -70,16 +61,16 @@ const renderMenu = (item, path = "") => {
   );
 };
 
-const SiderMenu = ({ openKeys, selectedKeys, setOpenKeys, layout, menuList }) => {
+const SiderMenu = () => {
+  const openMenuKey = useSelector(getOpenMenuKey)
+  const menuList = useSelector(getMenuList)
+  const layout = useSelector(getLayoutMode)
+  const selectMenuKey = useSelector(getSelectMenuKey)
+  const menuComponent = useMemo(() => menuList && menuList.map((i) => renderMenu(i, "")), [menuList]);
+  const dispatch = useDispatch()
 
-  const menuComponent = useMemo(
-    () => menuList && menuList.map((i) => renderMenu(i, "")),
-    [menuList]
-  );
   // 菜单组折叠
-  const onOpenChange = useCallback((keys) => {
-    setOpenKeys(keys);
-  }, [setOpenKeys]);
+  const onOpenChange = useCallback((keys) => dispatch(setOpenKey(keys)), [dispatch]);
   // classname
   const clsName = useMemo(() => {
     if (layout !== layoutTypes.SINGLE_COLUMN) {
@@ -108,13 +99,12 @@ const SiderMenu = ({ openKeys, selectedKeys, setOpenKeys, layout, menuList }) =>
         triggerSubMenuAction="click"
         className={clsName}
         onOpenChange={onOpenChange}
-        openKeys={openKeys}
-        selectedKeys={selectedKeys}
-      >
-        {menuComponent}
-      </Menu>
+        openKeys={openMenuKey}
+        selectedKeys={selectMenuKey}
+        children={menuComponent}
+      />
     </WrapContainer>
   );
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(SiderMenu);
+export default SiderMenu

src/layout/topMenu.js

@@ -1,14 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
 import MenuDnd from "@/components/menu-dnd";
 import MyIcon from "@/components/icon";
 import { reduceMenuList } from "@/utils";
 import { Breadcrumb } from "antd";
 import { getMenus } from "@/common";
-
-const mapStateToProps = (state) => ({
-  childKey: state.menu.selectMenuKey,
-});
+import { getSelectMenuKey } from "@/store/getters";
 
 function getParent(list, parentKey) {
   return list.find((i) => i[MENU_KEY] === parentKey);
@@ -28,16 +25,16 @@ async function getBreadArray(ckey) {
   return arr;
 }
 
-function TopMenu({ childKey }) {
+function TopMenu() {
   const [breadArr, setBread] = useState([]);
-
+  const selectMenuKey = useSelector(getSelectMenuKey)
   useEffect(() => {
     async function get() {
-      let data = await getBreadArray(childKey[0]);
+      let data = await getBreadArray(selectMenuKey[0]);
       setBread(data);
     }
     get();
-  }, [childKey]);
+  }, [selectMenuKey]);
 
   return (
     <div className="top-menu-wrapper">
@@ -59,4 +56,4 @@ function TopMenu({ childKey }) {
   );
 }
 
-export default connect(mapStateToProps, null)(TopMenu);
+export default TopMenu