Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 963de79

Browse files
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(itemasany, {
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)

AltStyle によって変換されたページ (->オリジナル) /