React 中如何使用 Reselect 和 Redux Toolkit 实现数据选择器-JavaScript中文网-JavaScript教程资源分享门户

在 React 中使用 Reselect 和 Redux Toolkit 实现数据选择器是一种常见的技术方案。本文将详细介绍如何使用 Reselect 和 Redux Toolkit 在 React 中实现数据选择器，并给出相应的示例代码。

Reselect 是什么？

Reselect 是一个被广泛使用的库，它用于在 Redux 应用中计算派生数据。Reselect 可以通过记忆化缓存来提高性能，这使得计算过程更加高效快速。

与使用简单的 mapStateToProps 函数不同，Reselect 提供了一种优雅的方式来实现在 Redux 中派生数据。它可以帮助你避免不必要的计算和渲染，并减少重复引用的代码。

Redux Toolkit 是什么？

Redux Toolkit 是一个官方推荐的 Redux 工具集。它旨在使 Redux 的开发变得更加简单、快速和直观。Redux Toolkit 通过封装常用的 Redux 模式和库，例如 Redux Thunk 和 Reselect，来减少冗余代码，并提供更好的开发体验。

使用 Redux Toolkit，你可以更快地构建 Redux 应用，并且代码更加清晰易懂。

如何使用 Reselect 和 Redux Toolkit 实现数据选择器

下面将介绍如何使用 Reselect 和 Redux Toolkit 实现数据选择器，在本例中我们假设有一个 Redux 存储，其中包含多个用户，我们希望能够通过 Reselect 计算出特定用户的信息，同时还使用了 Redux Toolkit 来管理 Redux 的状态。

步骤 1：创建 Redux 存储

首先，在 index.js 文件中创建 Redux 存储：

import { configureStore } from "@reduxjs/toolkit";
import usersReducer from "./usersSlice";

export const store = configureStore({
  reducer: {
    users: usersReducer,
  },
});

步骤 2：创建 Users 组件

import { useSelector } from "react-redux";
import { selectUserById } from "./usersSlice";

function Users() {
  const user = useSelector((state) => selectUserById(state, 1));

  return <div>{user.name}</div>;
}

export default Users;

在上面的代码中，我们使用了 useSelector 钩子从 Redux 存储中获取用户信息。值得注意的是，我们在 selectUserById 函数中使用了 Reselect。

步骤 3：创建 Reselect 选择器

下面，我们来创建一个简单的 Reselect 选择器，用于从 Redux 存储中获取特定的用户信息。

import { createSelector } from "reselect";

const selectUsers = (state) => state.users;

export const selectUserById = createSelector(
  [selectUsers, (_, id) => id],
  (users, id) => users.find((user) => user.id === id)
);

在上面的代码中，我们定义了 selectUserById 选择器，它接受两个参数：

第一个参数是一个返回整个用户列表数据的函数。
第二个参数是用户的 ID，它是 selectUserById 函数的后续参数。

当我们调用 selectUserById(state, userId) 时，Reselect 会缓存 users 和 userId，并且只在它们的值发生变化时才重新计算结果，以提高性能。

步骤 4：创建 Users 组件

import { useSelector } from "react-redux";
import { selectUserById } from "./usersSlice";

function Users() {
  const user = useSelector((state) => selectUserById(state, 1));

  return <div>{user.name}</div>;
}

export default Users;

在上面的代码中，我们使用 useSelector 钩子从 Redux 存储中获取用户信息，并通过 selectUserById 函数使用 Reselect 计算特定用户信息。

步骤 5：在应用程序中使用 Users 组件

最后，在应用程序中使用 Users 组件：

import { Provider } from "react-redux";
import { store } from "./store";
import Users from "./Users";

function App() {
  return (
    <Provider store={store}>
      <Users />
    </Provider>
  );
}

总结

本文介绍了如何使用 Reselect 和 Redux Toolkit 实现数据选择器。Reselect 是一个强大的库，它可以帮助我们避免不必要的计算，提高应用性能。Redux Toolkit 则使我们可以更快、更好地构建 Redux 应用，并减少一些冗余代码。学会使用这些工具可以帮助我们更好地管理数据，以及更好地开发 React 应用程序。

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