使用Redux的getStaticPaths

在使用 Next.js 进行服务器渲染时，我们有时候需要使用 getStaticPaths 函数来预构建指定的路由。此时，如果我们需要使用Redux管理数据，并确保在预构建时能够获取到所有需要的数据，我们就需要对 getStaticPaths 进行一定的改进。下面就让我们来学习如何通过Redux在 getStaticPaths 中获取数据。

准备工作

在进行本教程之前，请确保您已经安装并熟悉使用以下技术：

• React.js: 用于构建前端页面
• Redux: 用于管理应用程序的状态
• Next.js: 用于服务器渲染React应用程序

步骤

首先，我们需要创建一个组件，用于显示我们需要的数据。假设我们需要显示所有帖子的标题。我们可以先创建这样一个组件：

import { useSelector } from 'react-redux'

function Post({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

function Posts() {
  const posts = useSelector(state => state.posts)

  return (
    <div>
      {posts.map(post => <Post title={post.title} key={post.id} />)}
    </div>
  )
}

export default Posts

组件中定义了 Post 和 Posts 两个子组件。Post 组件负责渲染每一个标题，而 Posts 组件则是渲染所有帖子的容器。在 Posts 组件中，我们通过 useSelector 钩子函数从Redux中获取所有的帖子数据，并对其进行遍历，最终渲染出所有帖子的标题。

我们现在可以将 Posts 组件用于所需要的页面路由中，并将其包含在一个自定义的 getStaticProps 函数中。在该函数中，我们可以使用Redux来获取所有的帖子数据，然后将其以 props 的形式传递给组件：

import { useSelector } from 'react-redux'

function Post({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

function Posts({ posts }) {
  return (
    <div>
      {posts.map(post => <Post title={post.title} key={post.id} />)}
    </div>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

export default Posts

在 getStaticProps 函数中，我们使用 fetch 函数获取所有的帖子数据。在我们获得了这些数据后，我们返回一个 props 对象，并将所有数据封装在其中。这将确保在页面渲染过程中，我们可以通过 props 属性来访问数据。

我们现在已经有了帖子数据，但是我们不希望将所有的帖子同时显示在路由中。我们可以使用一个 getStaticPaths 函数来告诉 Next.js 哪些路由需要预构建，哪些不需要。在此函数中，我们可以从Redux中获取数据并返回适当的路由。

import { useSelector } from 'react-redux'

function Post({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

function Posts({ posts }) {
  return (
    <div>
      {posts.map(post => <Post title={post.title} key={post.id} />)}
    </div>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }))

  return {
    paths,
    fallback: false,
  }
}

export default Posts

在我们的 getStaticPaths 函数中，我们使用 fetch 函数获取所有的帖子数据并将其转换为JSON格式。在得到了所有帖子的数据后，我们从中筛选出 params 参数，以指定将来预构建的路由。在此例中，我们使用 map 函数将所有的帖子 id 转换为字符串形式，并将它们封装到各自的 params 对象中。最后，我们将所有路由配置存放在一个 paths 数组中，并将其返回。

另外，我们还需要注意到 fallback 参数。它允许我们控制在遇到尚未构建的页面时，构建是否将继续进行。在此例中，我们将其设置为 false，因为我们不希望构建未预先指定的路由。

这样我们就可以通过Redux管理数据，并使用预构建的路由，轻松快捷地进行服务器渲染了。