146 lines
3.9 KiB
TypeScript
146 lines
3.9 KiB
TypeScript
/**
|
|
* templateSocialStore 使用示例
|
|
*
|
|
* 这个文件展示了如何使用 templateSocialStore 来管理模板的点赞和收藏状态
|
|
*/
|
|
|
|
import { useTemplateSocialStore } from './templateSocialStore'
|
|
|
|
// 示例 1: 基本使用
|
|
export function Example1_BasicUsage() {
|
|
const { isLiked, setLiked } = useTemplateSocialStore()
|
|
|
|
const handleToggleLike = (templateId: string) => {
|
|
const currentState = isLiked(templateId)
|
|
setLiked(templateId, !currentState)
|
|
}
|
|
|
|
return { handleToggleLike }
|
|
}
|
|
|
|
// 示例 2: 批量更新状态（例如从 API 获取后）
|
|
export function Example2_BatchUpdate() {
|
|
const { setLikedStates, setFavoritedStates } = useTemplateSocialStore()
|
|
|
|
// 假设从 API 获取了模板列表及其社交状态
|
|
const updateFromAPI = (apiResponse: {
|
|
templates: Array<{ id: string; liked: boolean; favorited: boolean }>
|
|
}) => {
|
|
const likedStates: Record<string, boolean> = {}
|
|
const favoritedStates: Record<string, boolean> = {}
|
|
|
|
apiResponse.templates.forEach((template) => {
|
|
likedStates[template.id] = template.liked
|
|
favoritedStates[template.id] = template.favorited
|
|
})
|
|
|
|
// 批量更新
|
|
setLikedStates(likedStates)
|
|
setFavoritedStates(favoritedStates)
|
|
}
|
|
|
|
return { updateFromAPI }
|
|
}
|
|
|
|
// 示例 3: 在 React 组件中使用
|
|
export function Example3_ComponentUsage() {
|
|
const templateId = 'template-123'
|
|
|
|
// 获取状态和方法
|
|
const liked = useTemplateSocialStore((state) => state.isLiked(templateId))
|
|
const favorited = useTemplateSocialStore((state) => state.isFavorited(templateId))
|
|
const setLiked = useTemplateSocialStore((state) => state.setLiked)
|
|
const setFavorited = useTemplateSocialStore((state) => state.setFavorited)
|
|
|
|
const handleLike = () => {
|
|
setLiked(templateId, !liked)
|
|
}
|
|
|
|
const handleFavorite = () => {
|
|
setFavorited(templateId, !favorited)
|
|
}
|
|
|
|
return {
|
|
liked,
|
|
favorited,
|
|
handleLike,
|
|
handleFavorite,
|
|
}
|
|
}
|
|
|
|
// 示例 4: 使用选择器优化性能
|
|
export function Example4_SelectorOptimization() {
|
|
const templateId = 'template-123'
|
|
|
|
// 只订阅需要的状态，避免不必要的重渲染
|
|
const liked = useTemplateSocialStore((state) => state.likedMap[templateId])
|
|
const favorited = useTemplateSocialStore((state) => state.favoritedMap[templateId])
|
|
|
|
return { liked, favorited }
|
|
}
|
|
|
|
// 示例 5: 清空状态（例如用户登出时）
|
|
export function Example5_ClearState() {
|
|
const clear = useTemplateSocialStore((state) => state.clear)
|
|
|
|
const handleLogout = () => {
|
|
// 清空所有社交状态
|
|
clear()
|
|
// ... 其他登出逻辑
|
|
}
|
|
|
|
return { handleLogout }
|
|
}
|
|
|
|
// 示例 6: 结合 API 调用
|
|
export function Example6_WithAPI() {
|
|
const { setLiked, isLiked } = useTemplateSocialStore()
|
|
|
|
const handleLikeWithAPI = async (templateId: string) => {
|
|
const currentState = isLiked(templateId)
|
|
|
|
try {
|
|
// 乐观更新：立即更新 UI
|
|
setLiked(templateId, !currentState)
|
|
|
|
// 调用 API
|
|
// await api.likeTemplate(templateId)
|
|
|
|
// 如果 API 调用失败，回滚状态
|
|
// catch (error) {
|
|
// setLiked(templateId, currentState)
|
|
// throw error
|
|
// }
|
|
} catch (error) {
|
|
console.error('Failed to like template:', error)
|
|
}
|
|
}
|
|
|
|
return { handleLikeWithAPI }
|
|
}
|
|
|
|
// 示例 7: 获取所有点赞的模板
|
|
export function Example7_GetAllLiked() {
|
|
const likedMap = useTemplateSocialStore((state) => state.likedMap)
|
|
|
|
const getLikedTemplateIds = (): string[] => {
|
|
return Object.keys(likedMap).filter((id) => likedMap[id])
|
|
}
|
|
|
|
const likedCount = getLikedTemplateIds().length
|
|
|
|
return { getLikedTemplateIds, likedCount }
|
|
}
|
|
|
|
// 示例 8: 重置特定模板的状态
|
|
export function Example8_ResetTemplate() {
|
|
const { setLiked, setFavorited } = useTemplateSocialStore()
|
|
|
|
const resetTemplateState = (templateId: string) => {
|
|
setLiked(templateId, false)
|
|
setFavorited(templateId, false)
|
|
}
|
|
|
|
return { resetTemplateState }
|
|
}
|