day14: 模组化好的写法 -单一功能原则(2)

接续前一天的单一功能原则，我们重构了 fetchUser 变成一个 customer hook ， useFetchAPI，那我们现在来引入看看，也接着来重构剩下的部分。

• fetchUser 取资料 ✅
• updataUserData
• updateUserError
• popup 呈现
• 资料呈现

// Profile.jsx
import {useEffect, useCallback ,useState} from 'react';
import useFetchAPI from './useFetchAPI';

const Profile = ()=>{
	const {data,error} = useFetchAPI('https:www.fakeapi.cpm/login');
	
	return (
			<div>
					{Object.keys(userData).length > 0 &&
					<>
						<div>Name:{userData.name}</div>
						<div>Name:{userData.email}</div>
						<div>Name:{userData.phone}</div>
					</>
					}
					{userError && <div>{userError}</div>}
       </div>)

}

export default Profile;

在我们引用完 useFetchAPI 後，我们可以发现，是不是 fetch api 的事情只要交给 useFetchAPI，另外 updataUserData 和 updateUserError 的管理因为封装在 useFetchAPI 里，所以这两个部分也同时在 useFetchAPI 去维持他们的功能。所以 updataUserData 和 updateUserError 也重构完毕。

另外针对 popup 的部分，我们可以把它封装成一个叫 PopUp component，这样不论传入任何资料都适用，并且可以控制他开关。

// Popup component

const Popup = (isOpen,message)=>{
	return isOpen? <div>{message}</div> :null;
}

export default Popup;

// Profile.jsx
import {useEffect, useCallback ,useState} from 'react';
import useFetchAPI from './useFetchAPI';
import Popup from './Popup';

const Profile = ()=>{
	const {data,error} = useFetchAPI('https:www.fakeapi.cpm/login');
	
	return (
			<div>
					{Object.keys(userData).length > 0 &&
					<>
						<div>Name:{userData.name}</div>
						<div>Name:{userData.email}</div>
						<div>Name:{userData.phone}</div>
					</>
					}
					<Popup isOpen={!!error} message={error} />
       </div>
	)

}

export default Profile;

另外资料的部分也可以直接用 useFetchAPI 得到的 data 来呈现。

// Profile.jsx
import {useEffect, useCallback ,useState} from 'react';
import useFetchAPI from './useFetchAPI';
import Popup from './Popup';

const Profile = ()=>{
	const {data,error} = useFetchAPI('https:www.fakeapi.cpm/login');
	
	return (
			<div>
					{Object.keys(data).length > 0 &&
					<>
						<div>Name:{userData.name}</div>
						<div>Name:{userData.email}</div>
						<div>Name:{userData.phone}</div>
					</>
					}
					<Popup isOpen={!!error} message={error} />
       </div>
	)

}

export default Profile;

这样重构完事不是很简洁，也很方便找错误。