理解 Redux 中的 Selector

Redux 是一个用于管理 JavaScript 应用程序状态的库。在 Redux 中，selector 是一种函数，用于从 Redux 状态树中获取有用的数据。 Selector 可以根据应用程序的需要提取数据的子集并将其转换为一个可用于应用程序的新对象。本文将探讨 Redux 中 selector 的作用、实现原理和使用方法。

Selector 的作用

Redux 中 selector 的主要作用是从 Redux 状态树中获取数据，将它们组装成一个可用的对象，然后将其传递给 React 组件。在 Redux 中，selector 用于从应用程序状态中提取有用的数据，这些数据可以作为 props 传递给 React 组件。

Selector 还有助于将应用程序的状态分离为单个部分，并允许开发人员重新组织或重构应用程序状态的结构，而不必直接修改所有使用状态的组件。

Selector 的实现原理

Redux 中的 selector 通常由 reselect 库实现。reselect 库提供了一个创建 selector 的函数 createSelector，该函数可以接受一个或多个 selector 作为参数，并返回一个新的 selector。

使用 createSelector 可以将多个 selector 组合成一个 selector，这样可以避免在每个组件中重复编写相同的代码，并使代码更易于维护。

下面是一个使用 reselect 库创建 selector 的示例代码：

import { createSelector } from 'reselect'

const getUsers = state => state.users
const getSelectedUserIds = state => state.selectedUserIds

export const getSelectedUsers = createSelector(
  [getUsers, getSelectedUserIds],
  (users, selectedUserIds) =>
    users.filter(user => selectedUserIds.includes(user.id))
)

在上面的代码中，我们创建了两个 selector：getUsers 和 getSelectedUserIds。接着，我们将这两个 selector 和一个转换函数传递给 createSelector 函数，这个转换函数接受两个参数：第一个参数是 getUsers 和 getSelectedUserIds 中获取到的值，第二个参数是转换函数本身。在这个例子中，我们使用数组过滤器过滤了 users 数组，使其只包含选定用户的数据。

Selector 的使用方法

将 selector 传递给 React 组件的最简单方法是使用 react-redux 库中的 connect 函数。例如，我们可以像下面这样将刚刚创建的 getSelectedUsers 函数传递给 connect 函数：

import { connect } from 'react-redux'
import { getSelectedUsers } from './selectors'

const UsersList = ({ selectedUsers }) =>
  <ul>
    {selectedUsers.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>

const mapStateToProps = state => ({
  selectedUsers: getSelectedUsers(state)
})

export default connect(mapStateToProps)(UsersList)

在上面的代码中，我们使用 mapStateToProps 函数将 getSelectedUsers 函数作为 selectedUsers 状态的值传递给 UsersList 组件。

总结

在本文中，我们讨论了 Redux 中 selector 的作用、实现原理和使用方法。 Selector 可以让我们从 Redux 状态中提取特定的数据，这些数据可以作为 props 传递给 React 组件。在实现 selector 时，可以使用 reselect 库来创建器，将多个 selector 组合成一个更简单，更易于维护的函数。将 selector 传递给 React 组件的最简单方法是使用 react-redux 库中的 connect 函数。

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