Next.js 中如何使用 reselect 优化 redux 应用-JavaScript中文网-JavaScript教程资源分享门户

在 React 应用中，我们通常使用 Redux 管理数据流，并在 Next.js 中借助 next-redux-wrapper 实现服务端渲染。但是，当数据状态较为复杂时，我们可能会出现不必要的重复计算，导致性能瓶颈。reselect 就是专门为这种情况开发的库，它可以缓存在 Redux store 中计算的数据，以优化应用性能。

什么是 reselect

reselect 是一个用于创建可记忆的、高效的 memoized 选择器的库。它可以根据参数，缓存并返回预计算结果，以便在下一次调用时有效地实现数据的重用。

使用 reselect 可以将选择器与 Redux 应用程序的 store 集成起来，以提供优化应用程序性能所需的所有信息。

reselect 的 API 很简单，只有两个主要的函数：

createSelector: 创建一个可记忆的选择器函数。
createStructuredSelector: 将一个对象映射到一个创建的选择器函数，用于便捷地组织多个选择器。

如何使用 reselect

在 Next.js 中使用 reselect 需要两个步骤：创建选择器和将选择器与 store 相关联。

创建选择器

创建选择器是使用 reselect 的第一步。选择器实际上只是一个函数，它从 Redux store 中获取数据，并根据该数据对其进行转换和筛选。下面是一个例子：

import { createSelector } from 'reselect'

const usersSelector = state => state.users
const filterSelector = state => state.filter

export const getUsersWithFilter = createSelector(
  [usersSelector, filterSelector],
  (users, filter) => {
     // 此处进行计算或筛选操作
     return users.filter(user => user.name.toLowerCase().includes(filter.toLowerCase()))
  }
)

在上面的例子中，我们定义了两个选择器函数 usersSelector 和 filterSelector。由于 createSelector 接受一个数组作为第一个参数，它将这些选择器用于创建一个带有 users 和 filter 作为参数的函数。返回的函数可以缓存上一次的结果，在下一次调用时有效地重用计算结果。

此时，我们已经成功地创建了可重用的选择器函数 getUsersWithFilter，它读取 Redux store 中的 users 和 filter，并根据条件进行筛选。

关联选择器与 store

选择器本身是不具有任何与 store 相关的信息的，因此我们需要将选择器与 store 相关联。下面是关联步骤的示例代码：

import { createStore } from 'redux'
import { Provider } from 'next-redux-wrapper'
import { getUsersWithFilter, getUsersWithoutFilter } from './selectors'

...

const store = createStore(reducer)

const App = () => (
  <Provider store={store}>
    <UsersListWithFilters
      usersSelector={getUsersWithFilter}
      usersWithoutFilterSelector={getUsersWithoutFilter}
    />
  </Provider>
)

在这个示例中，我们首先使用 createStore 创建了一个 Redux store。然后，我们在 Provider 组件中使用了该 store，并将 getUsersWithFilter 和 getUsersWithoutFilter 选择器作为 props 传递给 UsersListWithFilters 组件。

在组件内部，我们可以轻松使用这些选择器函数，以便根据不同的条件渲染不同的数据。

import { useSelector } from 'react-redux'

const UsersListWithFilters = ({ usersSelector, usersWithoutFilterSelector }) => {
  const users = useSelector(filter ? usersSelector : usersWithoutFilterSelector)

  // 渲染用户列表
}

在上面的代码中，我们使用 useSelector 钩子根据条件选择要使用的选择器，并从 Redux store 中获取数据。

总结

使用 reselect 可以帮助我们优化 Redux 应用程序的性能，避免不必要的重复计算。通过创建选择器和将其与 store 相关联，我们可以轻松地编写高效且可维护的代码。

虽然 reselect 看似只是一个小工具，但它可以大幅提升应用程序性能，是我们在开发复杂应用时不可或缺的工具。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658fbc00eb4cecbf2d552b5f