Next.js中能否将getStaticProps数据传入ContextProvider作为useReducer初始值？

我正在开发一个博客网站，在pages/index.js里通过getStaticProps获取文章列表，然后把它作为同文件内useReducer的初始值，用来做客户端的基础排序和过滤。现在想精简index.js的代码，同时用Context API替代属性透传，尝试把useReducer逻辑迁移到context/ArticlesProvider.js里，但不知道怎么把index.js里的文章数据传入这个文件作为useReducer的初始值，让文章组件能通过Context API在页面加载后立刻显示文章列表。想请教这种状态管理方式可行吗？有没有更优方案，还是应该继续在index.js里管理状态？

当前index.js代码：

// reducer 定义...

const Home = ({ articles }) => {
  const [state, dispatch] = useReducer(reducer, {
    articlesList: articles,
    filterValue: '',
  });

  // 触发 action 的函数...
}

// getStaticProps 函数...

可行方案：将初始数据作为Props传入Context Provider #

这种状态管理方式完全可行，核心思路是让Context Provider组件接收外部传入的初始文章数据，再用它初始化useReducer。具体实现步骤如下：

1. 修改ArticlesProvider，支持接收初始数据 #

在context/ArticlesProvider.js中，让Provider组件接收initialArticles作为props，同时初始化状态时保存原始文章列表（避免过滤/排序后丢失源数据）：

import { createContext, useContext, useReducer } from 'react';

const ArticlesContext = createContext();

// 定义reducer逻辑
const articlesReducer = (state, action) => {
  switch (action.type) {
    case 'SET_FILTER':
      const filterValue = action.payload;
      return {
        ...state,
        filterValue,
        filteredArticles: state.originalArticles.filter(article => 
          article.title.toLowerCase().includes(filterValue.toLowerCase())
        )
      };
    case 'SORT_ARTICLES':
      // 根据需求实现排序逻辑，比如按日期/标题
      const sorted = [...state.filteredArticles].sort((a, b) => 
        new Date(b.date) - new Date(a.date)
      );
      return { ...state, filteredArticles: sorted };
    default:
      return state;
  }
};

export const ArticlesProvider = ({ children, initialArticles }) => {
  // 初始化状态：保存原始数据+默认过滤结果
  const initialState = {
    originalArticles: initialArticles,
    filteredArticles: initialArticles,
    filterValue: ''
  };

  const [state, dispatch] = useReducer(articlesReducer, initialState);

  return (
    <ArticlesContext.Provider value={{ state, dispatch }}>
      {children}
    </ArticlesContext.Provider>
  );
};

// 自定义Hook，简化组件调用Context的逻辑
export const useArticles = () => {
  const context = useContext(ArticlesContext);
  if (!context) {
    throw new Error('useArticles必须在ArticlesProvider内部使用');
  }
  return context;
};

2. 在index.js中传入初始数据并包裹子组件 #

修改pages/index.js，把getStaticProps拿到的articles传给ArticlesProvider，同时把需要访问文章状态的子组件放在Provider内部：

import { ArticlesProvider } from '../context/ArticlesProvider';
import ArticleFilters from '../components/ArticleFilters';
import ArticleList from '../components/ArticleList';

const Home = ({ articles }) => {
  return (
    <ArticlesProvider initialArticles={articles}>
      {/* 所有需要访问文章状态的子组件都放在这里 */}
      <ArticleFilters />
      <ArticleList />
    </ArticlesProvider>
  );
};

export async function getStaticProps() {
  // 这里是你的文章数据获取逻辑，比如从本地文件/CMS读取
  const articles = await fetchYourArticles();
  return {
    props: { articles }
  };
}

export default Home;

3. 子组件通过自定义Hook访问状态 #

比如在ArticleList.js中：

import { useArticles } from '../context/ArticlesProvider';

const ArticleList = () => {
  const { state } = useArticles();
  return (
    <div className="article-list">
      {state.filteredArticles.map(article => (
        <div key={article.id} className="article-card">
          <h3>{article.title}</h3>
          <p>{article.excerpt}</p>
        </div>
      ))}
    </div>
  );
};

export default ArticleList;

更优方案的选择建议 #

• 基础场景（仅首页需要排序过滤）：如果index.js的代码量不大，子组件层级不深，留在原文件管理状态也完全没问题，省掉Context的拆分成本。
• 复杂场景（多子组件/跨组件共享状态）：如果有多个子组件需要访问过滤/排序状态和dispatch，或者后续可能在其他页面复用相关逻辑，用Context拆分是更优的选择，能避免繁琐的props透传，代码结构更清晰。
• 跨页面数据共享：如果后续需要在其他页面（比如文章详情页）复用文章数据，可结合SWR/React Query做数据缓存，再用Context管理客户端状态，兼顾数据获取和状态管理的需求。

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