Next.js结合next-redux-toolkit：如何在特定页面加载前初始调用action？

针对你在动态路由页面中需要重复添加useEffect预加载数据的问题，有以下几种简洁的解决方案：

1. 用统一Layout组件包裹所有子页面 #

创建一个专属的Layout组件，将数据预加载逻辑集中在这里，所有[project_id]下的子页面都嵌套在这个Layout中，实现单次action调用覆盖所有页面：

步骤1：编写Layout组件 #

// pages/[project_id]/Layout.jsx
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProjectData } from '../../redux/actions';

export default function ProjectLayout({ children, projectId }) {
  const dispatch = useDispatch();
  const projectData = useSelector(state => state.project.data);
  const isLoading = useSelector(state => state.project.isLoading);

  // 仅当数据不存在或不匹配当前projectId时触发请求
  useEffect(() => {
    if (!projectData || projectData.id !== projectId) {
      dispatch(fetchProjectData(projectId));
    }
  }, [dispatch, projectId, projectData]);

  // 加载状态处理
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 数据加载失败处理
  if (!projectData) {
    return <div>数据加载失败，请重试</div>;
  }

  return <>{children}</>;
}

步骤2：在子页面中使用Layout #

// pages/[project_id]/assets.jsx
import ProjectLayout from './Layout';

export default function AssetsPage({ params }) {
  return (
    <ProjectLayout projectId={params.project_id}>
      <div>资产页面内容</div>
    </ProjectLayout>
  );
}

如果是Next.js 13+的App Router，直接将上述逻辑写在[project_id]/layout.js中即可，App Router的layout会自动作用于所有子路由，无需手动嵌套。

2. 抽离公共服务端预获取逻辑（Pages Router） #

如果使用Pages Router，可以把getServerSideProps的逻辑抽成公共函数，避免每个页面重复编写：

步骤1：编写公共服务端逻辑 #

// utils/getProjectServerProps.js
import { wrapper } from '../redux/store';
import { fetchProjectData } from '../redux/actions';

export const getProjectServerProps = wrapper.getServerSideProps(async (context) => {
  const { project_id } = context.params;
  await context.store.dispatch(fetchProjectData(project_id));
  return { props: {} };
});

步骤2：在子页面中复用 #

// pages/[project_id]/information.jsx
import { getProjectServerProps } from '../../utils/getProjectServerProps';

export default function InformationPage() {
  // 直接使用Redux中已预加载的数据
  return <div>项目信息页面内容</div>;
}

// 复用公共服务端逻辑
export const getServerSideProps = getProjectServerProps;

这种方式会在服务端完成数据预加载，页面渲染前Redux状态就已填充完毕，无需客户端useEffect。

3. 封装自定义Hook简化重复调用 #

如果不想用Layout或服务端逻辑，可以把数据预加载逻辑封装成自定义Hook，每个页面只需一行代码调用：

步骤1：编写自定义Hook #

// hooks/useProjectData.js
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProjectData } from '../redux/actions';

export default function useProjectData(projectId) {
  const dispatch = useDispatch();
  const projectData = useSelector(state => state.project.data);
  const isLoading = useSelector(state => state.project.isLoading);

  useEffect(() => {
    if (!projectData || projectData.id !== projectId) {
      dispatch(fetchProjectData(projectId));
    }
  }, [dispatch, projectId, projectData]);

  return { projectData, isLoading };
}

步骤2：在页面中使用Hook #

// pages/[project_id]/index.jsx
import useProjectData from '../../hooks/useProjectData';

export default function ProjectIndexPage({ params }) {
  const { projectData, isLoading } = useProjectData(params.project_id);

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

  return <div>项目首页：{projectData.name}</div>;
}

内容的提问来源于stack exchange，提问作者Artemixx