Skip to content

Commit 963de79

Browse files
javaLuojavaLuo
committed
update / use react-redux hooks
1 parent 0dc5a31 commit 963de79

File tree

13 files changed

+213
-267
lines changed

13 files changed

+213
-267
lines changed

‎package.json‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -24,59 +24,59 @@
2424
"dependencies": {
2525
"@loadable/component": "^5.14.1",
2626
"@rematch/core": "^2.0.1",
27-
"antd": "^4.12.3",
27+
"antd": "^4.14.1",
2828
"axios": "^0.21.1",
29-
"core-js": "^3.9.0",
29+
"core-js": "^3.9.1",
3030
"history": "^4.10.1",
3131
"lodash": "^4.17.21",
3232
"normalize.css": "^8.0.1",
33-
"react": "17.0.1",
34-
"react-dom": "17.0.1",
35-
"react-redux": "^7.2.2",
33+
"react": "17.0.2",
34+
"react-dom": "17.0.2",
35+
"react-redux": "^7.2.3",
3636
"react-router-cache-route": "^1.11.0",
3737
"react-router-dom": "^5.2.0",
38-
"react-use": "^17.1.1",
38+
"react-use": "^17.2.1",
3939
"react-vcode": "1.0.11",
4040
"redux": "^4.0.5"
4141
},
4242
"devDependencies": {
4343
"@types/enzyme": "^3.10.8",
4444
"@types/enzyme-adapter-react-16": "^1.0.6",
4545
"@types/history": "^4.7.8",
46-
"@types/jest": "^26.0.20",
46+
"@types/jest": "^26.0.21",
4747
"@types/loadable__component": "^5.13.3",
4848
"@types/lodash": "^4.14.168",
4949
"@types/mockjs": "^1.0.3",
50-
"@types/qs": "^6.9.5",
51-
"@types/react": "^17.0.2",
52-
"@types/react-dom": "^17.0.1",
50+
"@types/qs": "^6.9.6",
51+
"@types/react": "^17.0.3",
52+
"@types/react-dom": "^17.0.3",
5353
"@types/react-redux": "^7.1.16",
5454
"@types/react-router-dom": "^5.1.7",
5555
"@types/webpack-env": "^1.16.0",
56-
"@typescript-eslint/eslint-plugin": "^4.15.2",
57-
"@typescript-eslint/parser": "^4.15.2",
56+
"@typescript-eslint/eslint-plugin": "^4.19.0",
57+
"@typescript-eslint/parser": "^4.19.0",
5858
"antd-dayjs-webpack-plugin": "^1.0.6",
59-
"autoprefixer": "^10.2.4",
59+
"autoprefixer": "^10.2.5",
6060
"awesome-typescript-loader": "^5.2.1",
6161
"body-parser": "^1.19.0",
6262
"clean-webpack-plugin": "^3.0.0",
63-
"copy-webpack-plugin": "^7.0.0",
64-
"css-loader": "^5.1.0",
65-
"css-minimizer-webpack-plugin": "^1.2.0",
63+
"copy-webpack-plugin": "^8.1.0",
64+
"css-loader": "^5.2.0",
65+
"css-minimizer-webpack-plugin": "^1.3.0",
6666
"dayjs": "^1.10.4",
6767
"enzyme": "^3.11.0",
6868
"enzyme-adapter-react-16": "^1.15.6",
69-
"eslint": "^7.20.0",
69+
"eslint": "^7.22.0",
7070
"eslint-config-prettier": "^8.1.0",
7171
"eslint-loader": "^4.0.2",
7272
"eslint-plugin-prettier": "^3.3.1",
73-
"eslint-plugin-react": "^7.22.0",
73+
"eslint-plugin-react": "^7.23.1",
7474
"eslint-plugin-react-hooks": "^4.2.0",
7575
"express": "^4.17.1",
7676
"favicons": "^6.2.1",
7777
"favicons-webpack-plugin": "^5.0.2",
7878
"file-loader": "^6.2.0",
79-
"html-webpack-plugin": "^5.2.0",
79+
"html-webpack-plugin": "^5.3.1",
8080
"http-proxy-middleware": "^1.0.6",
8181
"jest": "^26.6.3",
8282
"jest-canvas-mock": "^2.3.1",
@@ -85,23 +85,23 @@
8585
"less-loader": "^8.0.0",
8686
"mini-css-extract-plugin": "^1.3.9",
8787
"mockjs": "^1.1.0",
88-
"postcss": "^8.2.6",
89-
"postcss-loader": "^5.0.0",
88+
"postcss": "^8.2.8",
89+
"postcss-loader": "^5.2.0",
9090
"prettier": "2.2.1",
9191
"source-map-loader": "^2.0.1",
9292
"style-loader": "^2.0.0",
9393
"sw-precache-webpack-plugin": "^1.0.0",
9494
"terser-webpack-plugin": "^5.1.1",
9595
"ts-import-plugin": "^1.6.7",
96-
"ts-jest": "^26.5.2",
97-
"typescript": "4.1.5",
96+
"ts-jest": "^26.5.4",
97+
"typescript": "4.2.3",
9898
"url-loader": "^4.1.1",
99-
"webpack": "^5.24.2",
99+
"webpack": "^5.28.0",
100100
"webpack-cli": "^4.5.0",
101101
"webpack-dev-middleware": "^4.1.0",
102102
"webpack-hot-middleware": "^2.25.0",
103103
"webpackbar": "^4.0.0",
104-
"workbox-webpack-plugin": "^6.1.1",
104+
"workbox-webpack-plugin": "^6.1.2",
105105
"xml-loader": "^1.2.1"
106106
},
107107
"browserslist": [

‎src/layouts/BasicLayout.tsx‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
// 第三方库
55
// ==================
66
import React, { useState, useCallback } from "react";
7-
import { connect } from "react-redux";
7+
import { useSelector, useDispatch } from "react-redux";
88
import { Route, Redirect } from "react-router-dom";
99
import CacheRoute, { CacheSwitch } from "react-router-cache-route";
1010
import loadable from "@loadable/component";
@@ -42,7 +42,7 @@ const [NotFound, NoPower, Home, MenuAdmin, PowerAdmin, RoleAdmin, UserAdmin] = [
4242
() => import(`../pages/System/RoleAdmin`),
4343
() => import(`../pages/System/UserAdmin`),
4444
].map((item) => {
45-
return loadable(item, {
45+
return loadable(item as any, {
4646
fallback: <Loading />,
4747
});
4848
});
@@ -54,25 +54,26 @@ import { RootState, Dispatch } from "@/store";
5454
import { Menu } from "@/models/index.type";
5555
import { History } from "history";
5656

57-
type Props = ReturnType<typeof mapState> &
58-
ReturnType<typeof mapDispatch> & {
59-
history: History;
60-
location: Location;
61-
};
57+
type Props = {
58+
history: History;
59+
location: Location;
60+
};
6261

6362
// ==================
6463
// 本组件
6564
// ==================
6665
function BasicLayoutCom(props: Props): JSX.Element {
66+
const dispatch = useDispatch<Dispatch>();
67+
const userinfo = useSelector((state: RootState) => state.app.userinfo);
6768
const [collapsed, setCollapsed] = useState(false); // 菜单栏是否收起
6869

6970
// 退出登录
7071
const onLogout = useCallback(() => {
71-
props.onLogout().then(() => {
72+
dispatch.app.onLogout().then(() => {
7273
message.success("退出成功");
7374
props.history.push("/user/login");
7475
});
75-
}, [props]);
76+
}, [props, dispatch.app]);
7677

7778
/**
7879
* 工具 - 判断当前用户是否有该路由权限，如果没有就跳转至401页
@@ -81,8 +82,8 @@ function BasicLayoutCom(props: Props): JSX.Element {
8182
const checkRouterPower = useCallback(
8283
(pathname: string) => {
8384
let menus: Menu[] = [];
84-
if (props.userinfo.menus && props.userinfo.menus.length) {
85-
menus = props.userinfo.menus;
85+
if (userinfo.menus && userinfo.menus.length) {
86+
menus = userinfo.menus;
8687
} else if (sessionStorage.getItem("userinfo")) {
8788
menus = JSON.parse(
8889
tools.uncompile(sessionStorage.getItem("userinfo") || "[]")
@@ -95,7 +96,7 @@ function BasicLayoutCom(props: Props): JSX.Element {
9596
}
9697
return false;
9798
},
98-
[props.userinfo]
99+
[userinfo]
99100
);
100101

101102
// 切换路由时触发
@@ -116,7 +117,7 @@ function BasicLayoutCom(props: Props): JSX.Element {
116117
return (
117118
<Layout className="page-basic" hasSider>
118119
<MenuCom
119-
data={props.userinfo.menus}
120+
data={userinfo.menus}
120121
collapsed={collapsed}
121122
location={props.location}
122123
history={props.history}
@@ -125,15 +126,15 @@ function BasicLayoutCom(props: Props): JSX.Element {
125126
<Layout>
126127
<Header
127128
collapsed={collapsed}
128-
userinfo={props.userinfo}
129+
userinfo={userinfo}
129130
onToggle={() => setCollapsed(!collapsed)}
130131
onLogout={onLogout}
131132
/>
132133
{/* 普通面包屑导航 */}
133-
<Bread menus={props.userinfo.menus} location={props.location} />
134+
<Bread menus={userinfo.menus} location={props.location} />
134135
{/* Tab方式的导航 */}
135136
{/* <BreadTab
136-
menus={props.userinfo.menus}
137+
menus={userinfo.menus}
137138
location={props.location}
138139
history={props.history}
139140
/> */}
@@ -179,10 +180,4 @@ function BasicLayoutCom(props: Props): JSX.Element {
179180
);
180181
}
181182

182-
const mapState = (state: RootState) => ({
183-
userinfo: state.app.userinfo,
184-
});
185-
const mapDispatch = (dispatch: Dispatch) => ({
186-
onLogout: dispatch.app.onLogout,
187-
});
188-
export default connect(mapState, mapDispatch)(BasicLayoutCom);
183+
export default BasicLayoutCom;

‎src/models/app.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,10 @@ export default {
5252
* 登录
5353
* @param { username, password } params
5454
* */
55-
async onLogin(params: { username: string; password: string }) {
55+
async onLogin(params: {
56+
username: string;
57+
password: string;
58+
}): Promise<any> {
5659
try {
5760
const res: Res = await axios.post("/api/login", params);
5861
return res;
@@ -65,7 +68,7 @@ export default {
6568
* 退出登录
6669
* @param null
6770
* **/
68-
async onLogout() {
71+
async onLogout(): Promise<any> {
6972
try {
7073
// 同 dispatch.app.reducerLogout();
7174

@@ -81,13 +84,16 @@ export default {
8184
* 设置用户信息
8285
* @param: {*} params
8386
* **/
84-
async setUserInfo(params: UserInfo) {
87+
async setUserInfo(params: UserInfo): Promise<string> {
8588
dispatch.app.reducerUserInfo(params);
8689
return "success";
8790
},
8891

8992
/** 修改了角色/菜单/权限信息后需要更新用户的roles,menus,powers数据 **/
90-
async updateUserInfo(params: undefined, rootState: RootState) {
93+
async updateUserInfo(
94+
params: undefined,
95+
rootState: RootState
96+
): Promise<any> {
9197
/** 2.重新查询角色信息 **/
9298
const userinfo: UserInfo = rootState.app.userinfo;
9399

0 commit comments

Comments
 (0)