19赞

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

作者：135369一生真爱_890 | 2023-09-07 16:19

如何解决《如何将状态传递给react-redux应用程序中的选择器？》经验，为你挑选了1个好方法。

我遇到了一个例子,mapStateToProps函数正在使用memoization.我只是想知道如何将"state"参数传递给memoized选择器.在查看重新选择以及redux的文档之后,似乎mapStateToProps可以返回一个接受状态作为其参数的函数,而连接装饰器可能是将状态传递给它但不确定的.有人可以解释一下吗？

视图/曲目列表/ 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);

芯/ 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));
  }
);

therewillbec.. 25

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

什么是选择器？

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

让我们将Redux商店视为我们的"前端数据库".出于此目的在数据库中,如果要提取总数据的子集,则执行查询.在类似的方式中,选择器是我们对Redux商店的查询.

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

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

选择器可以计算派生数据,允许Redux存储最小可能状态.

选择器是有效的.除非其参数之一发生变化,否则不会重新计算选择器.

选择器是可组合的.它们可以用作其他选择器的输入.

什么是高阶组件？

高阶组件是一个获取现有组件并返回新组件的函数.

Connect是一个给定选择器的高阶组件

摘自这个精彩的要点,给出了连接的一个很好的解释.

connect()是一个将Redux相关的props注入组件的函数.

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

我们可以通过传递mapStateToProps函数作为参数来赋予它对state的访问权.

我们还可以通过mapDispatchToProps将动作创建者绑定到store.dispatch.这样做的好处是我们不需要传递整个存储,以便组件可以访问store.dispatch,以便组件可以调度自己的Redux操作.

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

来自react-redux文档

mapStateToProps函数接受整个Redux存储状态的单个参数,并返回要作为props传递的对象.它通常被称为选择器.

想想mapStateToProps返回的对象是我们对Redux存储的查询结果.所结果的

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

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

更高阶的Connect组件允许我们通过将来自此新对象的数据与组件的现有道具合并来扩展现有组件的功能.

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

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

通过在mapStateToProps中撤回函数,我们可以劫持组件的渲染周期并优化性能

在需要更多控制渲染性能的高级场景中,mapStateToProps()也可以返回一个函数.在这种情况下,该函数将用作特定组件实例的mapStateToProps().这允许您进行每个实例的memoization.

通过将mapStateToProps函数作为参数传递给我们的高阶组件,我们连接的组件将在Redux存储中的某个状态发生更改时随时更新.

如果这些更新频繁发生或状态树很大,那么重选库很有用,因为它允许我们使用memoized选择器.

这个奇特的词意味着存储选择器调用的结果,以防需要再次检索它们.

因此,如果mapStatesToProps返回一个普通对象而不是一个函数,那么每当我们的存储状态发生变化时,我们就会为我们的组件提供新的道具.

将选择器连接到商店

如果您使用的是React Redux,则可以将选择器作为mapStateToProps()中的常规函数调用:

import { getVisibleTodos } from '../selectors'

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

共享多个组件的选择器

在使用重新选择库时,我们可以像重组分一样重新选择选择器道具.这允许我们跨多个组件共享选择器.

假设我们有多个toDo列表,每个列表都有自己的Id.我们仍然会为每个toDo列表实例使用相同的getVisibleTodos选择器,但只是传递一个不同的id作为prop.

但是,问题是createSelector仅在其参数集与其前一组参数相同时才返回缓存值.

重新选择文档指出我们可以通过在mapStateToProps中返回一个函数来克服这个限制:

为了跨多个组件共享选择器并保留memoization,组件的每个实例都需要自己的选择器私有副本.如果提供给connect的mapStateToProps参数返回一个函数而不是一个对象,它将用于为容器的每个实例创建一个单独的mapStateToProps函数.

通过在mapStateToProps中返回一个函数,我们可以克服这个限制,并且memoization将正常工作.

有关详细说明,请参阅此处

1> therewillbec..：