个人中心

01-页面结构

目标：能够根据模板搭建个人中心页面结构
步骤：

1. 根据模板修改 Profile 页面结构

   02-获取用户信息并展示

   该功能分为以下几步来实现：

2. 发送请求获取用户信息

3. 页面分发获取用户信息的 action
4. 将用户信息存储到 redux 中

5. 获取用户信息并展示

   03-用户信息-发送请求获取数据

   目标：能够发送请求获取用户信息
   步骤：

6. 根据接口准备所需类型

7. 创建 actions/profile.ts 文件
8. 创建获取用户信息的 action

核心代码：
types/data.d.ts 中：
// 我的 - 个人信息
export type User = {
id: string;
name: string;
photo: string;
art_count: number;
follow_count: number;
fans_count: number;
like_count: number;
};
actions/profile.ts 中：
import { http } from ‘@/utils’;
import type { RootThunkAction } from ‘@/types/store’;
import type { User } from ‘@/types/data’;

type UserResponse = {
message: string;
data: User;
};

// 我的页面 - 获取个人信息
export const getUser = (): RootThunkAction => {
return async (dispatch) => {
const res = await http.get(‘/user’);
console.log(res);
};
};

04-用户信息-组件分发 action

目标：能够在我的页面中分发获取用户信息的 action
核心代码：
Profile/index.tsx 中：
import { useEffect } from ‘react’;
import { useDispatch } from ‘react-redux’;
import { getUser } from ‘@/store/actions’;

const Profile = () => {
const dispatch = useDispatch();

useEffect(() => {
dispatch(getUser());
}, [dispatch]);

// …
};

05-用户信息-存储到 redux

目标：能够将用户信息保存到 redux 中
步骤：

1. 准备保存状态到 redux 的 action 类型
2. 在获取个人信息的 action 中将用户信息存储到 redux 中
3. 创建 reducers/profile.ts，并完成存储用户信息的功能
4. 在 reducers/index.ts 中，将 profile 合并到根 reducer 中

核心代码：
types/store.d.ts 中：
import type { User } from ‘../data’;

// 将 ProfileAction 联合到 redux action 类型中
type RootAction = LoginAction | ProfileAction;

export type ProfileAction = {
type: ‘profile/getUser’;
payload: User;
};
actions/profile.ts 中：
export const getUser = (): RootThunkAction => {
return async (dispatch) => {
const res = await http.get(‘/user’);
const { data, message } = res.data;

// 存储 redux 中
// 因为已经有 TS 类型，所以，此处代码都是有提示的
dispatch({ type: ‘profile/getUser’, payload: data });
};
};
reducers/profile.ts 中：
import type { User } from ‘@/types/data’;
import type { ProfileAction } from ‘@/types/store’;
type ProfileState = {
user: User;
};

const initialState = {
user: {},
} as ProfileState;

const profile = (state = initialState, action: ProfileAction): ProfileState => {
switch (action.type) {
case ‘profile/getUser’:
return {
…state,
user: action.payload,
};
default:
return state;
}
};

export default profile;
reducers/index.ts 中：
import profile from ‘./profile’;

const rootReducer = combineReducers({
// …
profile,
});

06-用户信息-展示用户信息

目标：能够展示用户信息
分析说明：
TS 支持索引查询类型（索引访问类型），用来查询属性的类型
type RootState = {
name: string;
};

// T1 的类型是：name 属性的类型 string
type T1 = RootState[‘name’];
步骤：

1. 导入 useSelector
2. 调用 useSelector 获取 user 状态
3. 从 user 对象中解构出用户数据并展示在页面中

核心代码：
import { useSelector } from ‘react-redux’;
import { RootState } from ‘@/types/store’;

const Profile = () => {
// const { user } = useSelector(state => state.profile)
const { user } = useSelector((state: RootState) => state.profile);

const { photo, name, like_count, follow_count, fans_count, art_count } = user;

// …
// 在 JSX 中渲染从 redux 中拿到的状态数据即可
};

07-封装 axios 响应工具类型

目标：能够封装工具类型统一处理 axios 的响应类型
分析说明：
对于项目接口来说，任何一个接口返回的顶层数据格式都是一样的，都有：

1. 都有 message 属性，类型为 string （固定）
2. 都有 data 属性，但是具体是什么类型不确定（变化）

// 登录
type LoginResponse = {
message: string;
data: Token;
};
// 用户
type UserResponse = {
message: string;
data: User;
};
问题：TS 类型中，什么类型可以配合多种类型使用，并且可以在使用时指定明确类型？泛型
步骤：

1. 在 types/data.d.ts 中，创建泛型工具类型 ApiResponse
2. 通过该泛型工具类型，统一处理 axios 响应类型

核心代码：
types/data.d.ts 中：
// 泛型工具类型
type ApiResponse = {
message: string;
data: Data;
};

// 统一处理axios响应类型：
// 登录
export type LoginResponse = ApiResponse;
// 用户
export type UserResponse = ApiResponse;
actions/login.ts 中：
import type { LoginResponse } from ‘@/types/data’;
actions/profile.ts 中：
import type { UserResponse } from ‘@/types/data’;

08-个人信息-页面结构

目标：能够根据模板展示个人信息页面
步骤：

1. 将 Edit 模板拷贝到 Profile 目录中
2. 在 App.tsx 中配置个人信息页面的路由
3. 在 App.scss 中统一调整 NavBar、List 的样式

核心代码：
App.tsx 中：
import ProfileEdit from ‘./pages/Profile/Edit’;

const App = () => {
return (
// …



);
};
App.scss 中：
.adm-list-default {
border: none;
font-size: 16px;
}
.adm-nav-bar-title {
font-size: 17px;
}
.adm-nav-bar-back-arrow {
font-size: 17px;
}

09-个人信息-获取并展示个人信息

目标：能够获取并展示编辑时的个人信息
步骤：

1. 在 types/data.d.ts 中，根据接口准备好返回数据类型
2. 在 actions/profile.ts 中，创建获取编辑时个人信息的 action
3. 在 types/store.d.ts 中，创建相应的 redux action 类型
4. 在 actions 中分发修改 redux 状态的 action
5. 在 reducers 中处理该 action，并将状态存储到 redux 中

核心代码：
types/data.d.ts 中：
export type UserProfile = {
id: string;
photo: string;
name: string;
mobile: string;
gender: number;
birthday: string;
intro: string;
};
export type UserProfileResponse = ApiResponse;
actions/profile.ts 中：
import type { UserProfileResponse } from ‘@/types/data’;

export const getUserProfile = (): RootThunkAction => {
return async (dispatch) => {
const res = await http.get(‘/user/profile’);
dispatch({ type: ‘profile/getUserProfile’, payload: res.data.data });
};
};
types/store/d.ts 中：
import type { UserProfile } from ‘./data’;
export type ProfileAction =
// …
{
type: ‘profile/getUserProfile’;
payload: UserProfile;
};
reducers/profile.ts 中：
// 注意：以下代码为简化代码

import type { UserProfile } from ‘@/types/data’;

type ProfileState = {
// …
userProfile: UserProfile;
};

const initialState = {
// …
userProfile: {},
} as ProfileState;

const profile = (state = initialState, action: ProfileAction): ProfileState => {
switch (action.type) {
// …
case ‘profile/getUserProfile’:
return {
…state,
userProfile: action.payload,
};
}
};
Profile/Edit/index.tsx 中：
import { useEffect } from ‘react’;
import { useDispatch, useSelector } from ‘react-redux’;
import { getUserProfile } from ‘@/store/actions’;
import type { RootState } from ‘@/types/store’;

const ProfileEdit = () => {
const dispatch = useDispatch();
const { userProfile } = useSelector((state: RootState) => state.profile);

useEffect(() => {
dispatch(getUserProfile());
}, [dispatch]);

const { photo, name, intro, gender, birthday } = userProfile;

// JSX 中展示用户信息
return (
// …
arrow
extra={
{intro}
}
>
{intro || ‘未填写’}

);
};

10-自定义 hooks

目标：能够知道什么是自定义 hooks
分析说明：
除了使用 React 提供的 hooks 之外，开发者还可以创建自己的 hooks，也就是自定义 hooks
问题：为什么要创建自定义 hooks？
回答：实现状态逻辑复用，也就是将与状态相关的逻辑代码封装到一个函数中，哪个地方用到了，哪个地方调用即可
封装自定义 hook 与封装普通函数的区别：是否包含了状态逻辑，如果需要包含 React 状态逻辑，那么，就得用自定义 hook；而如果封装的内容不涉及状态，此时，就用普通的函数封装即可。
如何理解状态逻辑？可以简单的理解为代码中是否包含 React hooks，比如，useState、useEffect、useRef 等，那么就得使用自定义 hook 来封装
自定义 hooks 的特点：

1. 名称必须以 use 开头
2. 和内置的 React Hooks 一样，自定义 hook 也是一个函数

• React Hooks（不管是内置的还是自定义的）只能在函数组件或其他自定义 hook 内使用

// 创建自定义 hooks 函数
const useXxx = (params) => {
// …
// 需要复用的状态逻辑代码
// …

return xxx
}

// 使用自定义 hooks 函数
const Hello = () => {
const xxx = useXxx(…)
}

• 说明：自定义 hooks 就是一个函数，可以完全按照对函数的理解，来理解自定义 hooks
  • 比如：参数和返回值都可以可选的，可以提供也可以不提供，根据实际的需求来实现即可

总结：

1. 自定义 hooks 是函数吗？ 是
2. 自定义 hooks 的名称有什么约束？必须以 use 开头

3. 自定义 hooks 可以没有参数或返回值吗？可以

   11-自定义 hooks-分析要封装的代码逻辑

   目标：能够分析要封装的代码逻辑找到相同点和不同点
   分析说明：
   函数封装的基本思想：将相同的逻辑直接拷贝到函数中，不同的数据或逻辑通过函数参数传入。需要返回数据，就通过函数返回值返回
   // 不同：导入的 action 函数不同
   import { getUser } from ‘@/store/actions’;
   import { getUserProfile } from ‘@/store/actions’;
   
   const Profile = () => {
   // 不同： 获取到的状态不同
   // 注意：虽然，此处两个获取到的都是 ‘profile’，但，实际上其他页面获取到的数据可能不同
   const { user } = useSelector(
   (state) => state.profile,
   );
   const { userProfile } = useSelector(
   (state) => state.profile,
   );
   
   useEffect(() => {
   // 不同：分发的 action 函数不同
   dispatch(getUser());
   dispatch(getUserProfile());
   }, [dispatch]);
   
   // 不同：获取到的状态不同
   const { photo, name, like_count, follow_count, fans_count, art_count } = user;
   const { photo, name, intro, gender, birthday } = userProfile;
   
   // …
   };
   分析以上【我的页面】和【个人信息页面】中获取数据的逻辑，有两个不同点：

4. 分发的 action 函数不同

5. 获取的状态不同

所以，只需要把这两点作为自定义 hooks 的参数即可
而这两个功能最终的目的，都是为了拿到相应的应用状态。因此，把拿到的应用状态，作为自定义 hooks 的返回值即可
// 将不同的内容，作为函数参数传入
const useInitialState = (action, stateName) => {
// 需要复用的状态逻辑代码（ 相同的逻辑代码 ）

// 最终，该操作需要什么数据，最终就通过 返回值 来返回
return state;
};

// 使用自定义 hooks：
const { userProfile } = useInitialState(getUserProfile, ‘profile’);
const { photo, name, intro, gender, birthday } = userProfile;

const { user } = useInitialState(getUser, ‘profile’);
const { photo, name, like_count, follow_count, fans_count, art_count } = user;

12-自定义 hooks-实现自定义 hooks-不考虑类型

目标：能够通过 JS 代码实现自定义 hooks
步骤：

1. 创建 utils/use-initial-state.ts 文件
2. 创建 useInitialState 函数（自定义 hook）
3. 导入用到的包
4. 将相同的逻辑，直接封装到 useInitialState 函数中
5. 将不同的地方，作为 useInitialState 函数的参数
6. 将拿到的状态作为 useInitialState 函数的返回值

核心代码：
utils/use-initial-state.ts 中：
// 导入用到的包
import { useEffect } from ‘react’;
import { useDispatch, useSelector } from ‘react-redux’;
import type { RootState } from ‘@/types/store’;

// 创建 useInitialState 函数（自定义 hook）
const useInitialState = (action: any, stateName: any) => {
const dispatch = useDispatch();
const state = useSelector((state: RootState) => state[stateName]);

useEffect(() => {
dispatch(action());
}, [dispatch, action]);

return state;
};

export { useInitialState };
Profile/Edit.tsx 中：
import { useInitialState } from ‘@/utils/use-initial-state’;

const ProfileEdti = () => {
const { userProfile } = useInitialState(getUserProfile, ‘profile’);
// …
};

13-自定义 hooks-为实现的自定义 hooks 添加类型

目标：能够为实现的自定义 hooks 添加类型
分析说明：
对于 useInitialState 这个自定义 hook 来说，只需要为参数指定类型即可

1. 参数 action：就是一个函数，所以，直接指定为最简单的函数类型即可
2. 参数 stateName：
   • stateName 表示从 Redux 状态中取出的状态名称，比如，’profile’ 或 ‘login’
   • 所以，stateName 应该是 RootState 中的所有状态名称中的任意一个
   • 但是，具体是哪一个不确定，只有在使用该函数时才能确定下来
   • 问题：如果一个类型不确定，应该是什么 TS 中的什么类型来实现？泛型

// Redux 整个应用，状态的类型
// 目前，Redux 中已经有两个状态：login（登录时的状态）和 profile（我的 - 个人信息）
// RootState => { login: Token; profile: ProfileState; a: B }
type RootState = ReturnType

// 希望，在使用 useInitialState 自定义 hook 的时候，只应该获取到 Redux 中已有的状态，但是，获取哪一个状态时不确定的，只有在调用时才能确定
// 因为 stateName 只能是 Redux 已有状态中的任何一个，所以，stateName 的取值范围：’login’ | ‘profile’ | ‘a’
// 而此处不能直接写死一个联合类型，因为 Redux 中的状态将来是会变化（将来还要继续往 redux 中添加状态）
// 既然不能写死，就得动态获取，也就是 Redux 状态类型 RootState 中有哪些状态，就拿到这些状态的名字即可
// 那也就是要获取到 RootState 对象类型中，所有键的集合： keyof RootState => ‘login’ | ‘profile’ | ‘a’
const useInitialState = (action: () => void, stateName: keyof RootState) {}

// 使用泛型：
// S extends keyof RootState 表示：创建了一个泛型的类型变量叫做：S
// 通过 extends 关键字来给 类型变量S 添加了泛型约束
// 约束：S 的类型应该是 keyof RootState 中的任意一个，也就是：’login’ | ‘profile’ | ‘a’
// const useInitialState = (action: () => void, stateName: S) {}
const useInitialState = (action: () => void, stateName: StateName) {}

// — 对比以上两种方式的区别 —
// 1 这种方式：在调用该函数时，最终得到的返回值类型：Token | ProfileState | B 也就是将所有可能出现的情况都列举出来了
const useInitialState = (action: () => void, stateName: keyof RootState) {}

// 2 这种方式：在调用该函数时，最终得到的返回值类型：是某一个状态的类型，这个类型由我们传入的 stateName 类决定
// 比如，useInitialState(getUser, ‘profile’) 返回值类型，就是 profile 这个键对应的类型：ProfileState
const useInitialState = (action: () => void, stateName: StateName) {}

// 调用：
useInitialState(getUser, ‘login’)
useInitialState(getUser, ‘profile’)
useInitialState(getUser, ‘a’)

// 原来讲过的泛型基础：
function id(value: Type): Type {
return value
}

id(10)
// 省略类型不写：
id(10)
核心代码：
utils/use-initial-state.ts 中：
// StateName 是泛型类型变量的名称
// extends 表示要遵循的泛型约束
// keyof RootState 用来获取 Redux 状态中所有的 key，即：所有状态名称中的任意一个
// 将类型变量作为参数 stateName 的类型
// 解释：约束参数 stateName 只能是 RootState 所有状态名称中的任意一个
const useInitialState = (
action: () => void,
stateName: StateName,
) => {
const state = useSelector((state: RootState) => state[stateName]);
// …
};