面试题：Next.js中Link组件与状态管理库Redux结合的基础使用

Question

在一个Next.js项目中，已经引入了Redux进行状态管理。现在要求实现一个功能：当点击Link组件跳转到新页面时，根据Redux中的某个状态（例如用户登录状态）决定是否显示特定的页面元素。请描述实现该功能的主要步骤，并给出关键代码示例。

Answer 1

主要步骤

1. 获取 Redux 状态：在组件中通过 useSelector 钩子从 Redux store 中获取用户登录状态。
2. 监听 Link 组件点击事件：在 Link 组件上添加点击事件监听。
3. 根据状态决定显示内容：在新页面根据获取的登录状态决定是否显示特定页面元素。

关键代码示例

1. 获取 Redux 状态
   • 假设 Redux 状态结构如下，在 store.js 中定义了用户登录状态：

   const initialState = {
       user: {
           isLoggedIn: false
       }
   };
   const rootReducer = (state = initialState, action) => {
       // 处理 action 以更新状态
       return state;
   };
   const store = createStore(rootReducer);
   

   • 在页面组件中获取状态：

   import React from'react';
   import { useSelector } from'react-redux';
   
   const MyPage = () => {
       const isLoggedIn = useSelector(state => state.user.isLoggedIn);
       return (
           // 组件内容
       );
   };
   
   export default MyPage;
   

2. 监听 Link 组件点击事件
   • 假设使用 next/link 中的 Link 组件：

   import Link from 'next/link';
   import React from'react';
   
   const MyLink = () => {
       const handleClick = () => {
           // 这里可以进行一些点击前的逻辑处理
       };
       return (
           <Link href="/new - page" onClick={handleClick}>
               Go to New Page
           </Link>
       );
   };
   
   export default MyLink;
   

3. 根据状态决定显示内容
   • 在新页面组件中：

   import React from'react';
   import { useSelector } from'react-redux';
   
   const NewPage = () => {
       const isLoggedIn = useSelector(state => state.user.isLoggedIn);
       return (
           <div>
               {isLoggedIn && <p>This is a specific element that shows when logged in.</p>}
           </div>
       );
   };
   
   export default NewPage;