如何在Next.js中使用Redux进行数据获取？实践遇困惑求解答

核心结论 #

选哪个取决于你是否需要服务器端渲染（SSR）：

• 需要SEO友好、首屏直接展示数据 → 在getServerSideProps中调用Redux action
• 仅客户端渲染（如后台页面、非SEO页面） → 在useEffect中调用Redux action

场景1：服务器端渲染（SSR） #

这是你之前用getServerSideProps的场景，结合Redux-Thunk时需要借助next-redux-wrapper来同步服务端与客户端的store状态。

步骤与代码示例 #

1. 配置Redux Store（带next-redux-wrapper）

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { createWrapper } from 'next-redux-wrapper';
import rootReducer from './reducers';

// 创建store的工厂函数
const makeStore = () => createStore(rootReducer, applyMiddleware(thunk));

// 导出wrapper用于包装页面的getServerSideProps
export const wrapper = createWrapper(makeStore);

2. 页面中在getServerSideProps调用action

// pages/posts.js
import { useSelector } from 'react-redux';
import { wrapper } from '../store';
import { fetchPosts } from '../actions/postActions';

const PostsPage = () => {
  const { items: posts, loading } = useSelector(state => state.posts);

  if (loading) return <div>加载中...</div>;

  return (
    <div className="posts-list">
      {posts.map(post => (
        <div key={post.id} className="post-item">
          <h3>{post.title}</h3>
          <p>{post.excerpt}</p>
        </div>
      ))}
    </div>
  );
};

// 用wrapper包装getServerSideProps，获取服务端store
export const getServerSideProps = wrapper.getServerSideProps(async ({ store }) => {
  // 等待thunk action完成数据获取
  await store.dispatch(fetchPosts());
  // 无需返回数据，组件直接从Redux store读取
  return { props: {} };
});

export default PostsPage;

关键注意点 #

• 必须用wrapper.getServerSideProps包装，否则服务端store无法传递到客户端
• 调用action时要加await，确保数据获取完成后再渲染页面
• 客户端会自动hydrate服务端的store状态，无需额外同步

场景2：客户端渲染（CSR） #

适合不需要SEO的页面（如用户中心、后台管理），直接在组件挂载时触发数据获取。

代码示例 #

// pages/profile.js
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUserProfile } from '../actions/userActions';

const ProfilePage = () => {
  const dispatch = useDispatch();
  const { profile, loading, error } = useSelector(state => state.user);

  // 组件挂载时调用Redux action
  useEffect(() => {
    dispatch(fetchUserProfile());
  }, [dispatch]); // dispatch是稳定引用，可放心加入依赖

  if (loading) return <div>加载中...</div>;
  if (error) return <div>获取数据失败：{error}</div>;

  return (
    <div className="profile-card">
      <h2>{profile.nickname}</h2>
      <p>邮箱：{profile.email}</p>
      <p>注册时间：{profile.registerTime}</p>
    </div>
  );
};

export default ProfilePage;

关键注意点 #

• 依赖数组中加入dispatch，避免React Strict Mode下重复调用
• 可根据需求添加条件判断（如仅当数据为空时才调用action）
• 首屏会先显示loading，适合对首屏速度要求不高的场景

混合场景：SSR初始数据 + 客户端动态更新 #

如果需要首屏SSR展示初始数据，后续在客户端动态刷新（如下拉加载、按钮触发），可以结合两种方式：

1. 在getServerSideProps中获取初始数据
2. 在组件中用useEffect或事件回调调用action更新数据

内容的提问来源于stack exchange，提问作者Dev-Siri