状态如何传递到react-redux应用程序中的选择器？

小编典典

状态如何传递到react-redux应用程序中的选择器？

reactjs

我遇到了一个示例，其中mapStateToProps函数正在使用备注。我只是想知道如何将“
state”参数传递给已记忆的选择器。在查看了文档以进行重新选择和redux之后，似乎mapStateToProps可以返回一个接受状态作为其参数的函数，而连接装饰器可能是将状态传递给它的函数，但不确定。有人可以说明一下吗？

视图/tracklist/index.js

const mapStateToProps = createSelector(
  getBrowserMedia,
  getPlayerIsPlaying,
  getPlayerTrackId,
  getCurrentTracklist,
  getTracksForCurrentTracklist,
  (media, isPlaying, playerTrackId, tracklist, tracks) => ({
    displayLoadingIndicator: tracklist.isPending || tracklist.hasNextPage,
    isMediaLarge: !!media.large,
    isPlaying,
    pause: audio.pause,
    pauseInfiniteScroll: tracklist.isPending || !tracklist.hasNextPage,
    play: audio.play,
    selectedTrackId: playerTrackId,
    tracklistId: tracklist.id,
    tracks
  })
);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Tracklist);

core / tracklists / selectors.js

export function getCurrentTracklist(state) {
//  console.log(state);
  let tracklists = getTracklists(state);
  return tracklists.get(tracklists.get('currentTracklistId'));
}

export const getTracksForCurrentTracklist = createSelector(
  getCurrentPage,
  getCurrentTrackIds,
  getTracks,
  (currentPage, trackIds, tracks) => {
    return trackIds
      .slice(0, currentPage * TRACKS_PER_PAGE)
      .map(id => tracks.get(id));
  }
);

阅读 281

2020-07-22

共1个答案

小编典典

当我们使用react-redux的Connect组件时，如何将状态传递给选择器的概述

什么是选择器？

选择器从源中提取数据的子集。

让我们将Redux存储视为我们的“前端数据库”。为此，在数据库中，如果要提取总数据的子集，则可以执行查询。选择器以类似的方式是我们对Redux存储的查询。

在最简单的情况下，选择器可以只返回整个商店的状态。

重新选择文档为我们 提供了使用选择器的 三个重要理由

选择器可以计算派生数据，从而允许Redux存储最小可能状态。
选择器是有效的。除非更改其中一个自变量，否则不会重新计算选择器。
选择器是可组合的。它们可以用作其他选择器的输入。

什么是高阶成分？

高阶组件是使用现有组件并返回新组件的函数。

Connect是一个具有较高选择权的组件

摘自这个精妙的要点，它很好地说明了连接。

connect（）是一个将与Redux相关的props注入组件的函数。

Connect是一个高阶组件，它使我们的React组件了解Redux存储。当我们调用connect时，我们可以传递mapStateToProps和mapDispatchToProps。这些功能定义
以何种方式 我们的新组件将被连接到了Redux商店。

我们可以通过传递mapStateToProps函数作为参数来使它访问状态。

我们还可以通过mapDispatchToProps将动作创建者绑定到store.dispatch。这样做的好处是，我们不需要传递整个商店的内容就可以使组件可以访问store.dispatch，因此组件可以调度自己的Redux操作。

我们传递给Connect的mapStateToProps函数是一个选择器

来自react-redux文档

mapStateToProps函数采用整个Redux存储状态的单个参数，并返回要作为prop传递的对象。它通常称为选择器。

将mapStateToProps返回的对象视为对Redux存储的查询结果。所结果的

mapStateToProps函数通常应返回一个普通对象。

调用mapStateToProps的结果通常是一个普通对象，表示我们从redux存储中提取的数据。

更高级别的Connect组件使我们可以通过将来自这个新对象的数据与该组件的现有prop合并来扩展现有组件的功能。

由于选择器只是函数，我们也可以使用connect组件将它们连接到Redux存储。

但是在某些情况下，我们可以返回一个函数。我们为什么要这样做？

通过重载mapStateToProps中的函数，我们可以劫持组件的呈现周期并优化性能

在需要对渲染性能进行更多控制的高级方案中，mapStateToProps（）也可以返回一个函数。在这种情况下，该函数将用作特定组件实例的mapStateToProps（）。这使您可以执行每个实例的备注。

通过将mapStateToProps函数作为参数传递给我们的高阶组件，只要Redux存储区中的某些状态发生变化，连接的组件就会被更新。

如果这些更新非常频繁地发生或状态树很大，则重新选择库很有用，因为它允许我们使用记忆选择器。

这个花哨的词意味着选择器调用的结果被存储起来，以防需要再次检索它们。

因此，如果mapStatesToProps返回一个普通对象而不是一个函数，那么无论何时我们的存储状态发生变化，我们都将为组件提供新的道具。

将选择器连接到商店

如果您使用的是React Redux，则可以在mapStateToProps（）中将选择器作为常规函数调用：

import { getVisibleTodos } from '../selectors'

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state)
  }
}

跨多个组件共享选择器

使用重选库时，我们可以像组件一样为重选选择器提供道具。这使我们可以在多个组件之间共享选择器。

假设我们有多个toDo列表，每个都有自己的ID。对于每个toDo列表实例，我们仍将使用相同的getVisibleTodos选择器，但只是传递一个不同的id作为道具。

但是，这样做的问题是，仅当createSelector的参数集与其先前的参数集相同时，才返回缓存的值。

重新选择的文档指出，我们可以通过在mapStateToProps内部返回一个函数来克服此限制：

为了在多个组件之间共享选择器并保留备忘录，该组件的每个实例都需要其自己的选择器私有副本。如果提供给connect的mapStateToProps参数返回一个函数而不是一个对象，则它将用于为容器的每个实例创建一个单独的mapStateToProps函数。

通过在mapStateToProps内部返回一个函数，我们可以克服此限制，并且备注将正确运行。

如需更详细的说明，请参见本

2020-07-22