重新选择-调用另一个选择器的选择器？

时间：2018-06-21 09:25:19

标签： javascript reactjs reselect

我有一个选择器：

const someSelector = createSelector(
   getUserIdsSelector,
   (ids) => ids.map((id) => yetAnotherSelector(store, id),
);                                      //     ^^^^^ (yetAnotherSelector expects 2 args)

该yetAnotherSelector是另一个选择器，它使用用户ID-id并返回一些数据。

但是，因为它是createSelector，所以我无权在其中存储（我不希望将它作为函数使用，因为那时便无法使用备忘录）。

是否可以通过某种方式访问​​createSelector内部的存储？还是有其他方法可以解决？

编辑：

我有一个功能：

const someFunc = (store, id) => {
    const data = userSelector(store, id);
              // ^^^^^^^^^^^^ global selector
    return data.map((user) => extendUserDataSelector(store, user));
                       //     ^^^^^^^^^^^^^^^^^^^^ selector
}

该功能正在杀死我的应用程序，导致所有内容重新渲染并让我发疯。帮助表示赞赏。

!!但是：

我已经完成了一些基本的自定义备注：

import { isEqual } from 'lodash';

const memoizer = {};
const someFunc = (store, id) => {
    const data = userSelector(store, id);
    if (id in memoizer && isEqual(data, memoizer(id)) {
       return memoizer[id];
    }

    memoizer[id] = data;
    return memoizer[id].map((user) => extendUserDataSelector(store, user));
}

确实有用，但是这不只是解决方法吗？

4 个答案:

答案 0 :(得分：8)

前言

我遇到了与您相同的情况，但是不幸的是，没有找到一种有效的方法来从另一个选择器的主体中调用选择器。

我说过有效方式，因为您总是可以有一个输入选择器，该选择器传递整个状态（存储），但这会根据每个状态的变化重新计算选择器：

const someSelector = createSelector(
   getUserIdsSelector,
   state => state,
   (ids, state) => ids.map((id) => yetAnotherSelector(state, id)
)

方法

但是，对于下面描述的用例，我发现了两种可能的方法。我想您的案子是相似的，因此您可以了解一些情况。

因此，情况如下：您有一个选择器，该选择器通过ID从商店获取特定的User，然后选择器以特定的结构返回User。假设getUserById选择器。到目前为止，一切都很好，也很简单。但是，当您想通过其ID获取多个用户并重用以前的选择器时，就会出现问题。让我们将其命名为getUsersByIds选择器。

1。始终使用数组输入ID值

第一种可能的解决方案是有一个选择器，该选择器始终期望一个id数组（getUsersByIds），第二个选择器重用前一个ID，但只会获得1个用户（getUserById） 。因此，当您只想从商店中获取1位用户时，就必须使用getUserById，但必须传递仅包含一个用户ID的数组。

这是实现方式： 

import { createSelectorCreator, defaultMemoize } from 'reselect'
import { isEqual } from 'lodash'

/**
 * Create a "selector creator" that uses `lodash.isEqual` instead of `===`
 *
 * Example use case: when we pass an array to the selectors,
 * they are always recalculated, because the default `reselect` memoize function
 * treats the arrays always as new instances.
 *
 * @credits https://github.com/reactjs/reselect#customize-equalitycheck-for-defaultmemoize
 */
const createDeepEqualSelector = createSelectorCreator(
  defaultMemoize,
  isEqual
)

export const getUsersIds = createDeepEqualSelector(
  (state, { ids }) => ids), ids => ids)

export const getUsersByIds = createSelector(state => state.users, getUsersIds,
  (users, userIds) => {
    return userIds.map(id => ({ ...users[id] })
  }
)

export const getUserById = createSelector(getUsersByIds, users => users[0])

用法： 

// Get 1 User by id
const user = getUserById(state, { ids: [1] })

// Get as many Users as you want by ids
const users = getUsersByIds(state, { ids: [1, 2, 3] })

2。重用选择器的主体，作为独立功能

这里的想法是将选择器主体的公共部分和可重用部分分离到一个独立的函数中，以便可以从所有其他选择器中调用此函数。

这是实现方式： 

export const getUsersByIds = createSelector(state => state.users, getUsersIds,
  (users, userIds) => {
    return userIds.map(id => _getUserById(users, id))
  }
)

export const getUserById = createSelector(state => state.users, (state, props) => props.id, _getUserById)

const _getUserById = (users, id) => ({ ...users[id]})

用法： 

// Get 1 User by id
const user = getUserById(state, { id: 1 })

// Get as many Users as you want by ids
const users = getUsersByIds(state, { ids: [1, 2, 3] })

结论

方法1。具有更少的样板（我们没有独立功能），并且实现清晰。

方法2。更可重用。想象一下这样的情况，当我们调用选择器时，我们没有用户的ID，但是我们从选择器的主体中获取了它的关系。在这种情况下，我们可以轻松地重用独立功能。这是一个伪示例：

export const getBook = createSelector(state => state.books, state => state.users, (state, props) => props.id,
(books, users, id) => {
  const book = books[id]
  // Here we have the author id (User's id)
  // and out goal is to reuse `getUserById()` selector body,
  // so our solution is to reuse the stand-alone `_getUserById` function.
  const authorId = book.authorId
  const author = _getUserById(users, authorId)

  return {
    ...book,
    author
  }
}

答案 1 :(得分：6)

针对您的someFunc案例

对于您的特定情况，我将创建一个选择器，该选择器本身将返回扩展器。

也就是说，为此：

const someFunc = (store, id) => {
    const data = userSelector(store, id);
              // ^^^^^^^^^^^^ global selector
    return data.map((user) => extendUserDataSelector(store, user));
                       //     ^^^^^^^^^^^^^^^^^^^^ selector
}

我会写：

const extendUserDataSelectorSelector = createSelector(
  selectStuffThatExtendUserDataSelectorNeeds,
  (state) => state.something.else.it.needs,
  (stuff, somethingElse) =>
    // This function will be cached as long as
    // the results of the above two selectors
    // does not change, same as with any other cached value.
    (user) => {
      // your magic goes here.
      return {
        // ... user with stuff and somethingElse
      };
    }
);

然后someFunc将变为：

const someFunc = createSelector(
  userSelector,
  extendUserDataSelectorSelector,
  // I prefix injected functions with a $.
  // It's not really necessary.
  (data, $extendUserDataSelector) =>
    data.map($extendUserDataSelector)
);

之所以称其为reifier模式，是因为它创建了一个预先绑定到当前状态的函数，该函数接受单个输入并将其修改。我通常将其用于通过id获取信息，因此使用了“ reify”。我也喜欢说“ reify”，这是我称呼它的主要原因。

针对您的情况

在这种情况下：

import { isEqual } from 'lodash';

const memoizer = {};
const someFunc = (store, id) => {
    const data = userSelector(store, id);
    if (id in memoizer && isEqual(data, memoizer(id)) {
       return memoizer[id];
    }

    memoizer[id] = data;
    return memoizer[id].map((user) => extendUserDataSelector(store, user));
}

基本上就是re-reselect所做的。您不妨考虑一下，如果您打算在全球范围内实施按ID记录的备忘录。

import createCachedSelector from 're-reselect';

const someFunc = createCachedSelector(
  userSelector,
  extendUserDataSelectorSelector,
  (data, $extendUserDataSelector) =>
    data.map($extendUserDataSelector)
// NOTE THIS PART DOWN HERE!
// This is how re-reselect gets the cache key.
)((state, id) => id);

或者，您也可以仅用弓把您的备忘录多选择器创建者包装起来，并命名为createCachedSelector，因为它基本上是同一回事。

编辑：为什么要返回函数

您可以执行此操作的另一种方法是只选择运行extendUserDataSelector计算所需的所有适当数据，但这意味着要将要使用该计算的所有其他函数暴露给它的接口。通过返回仅接受单个user基本数据的函数，可以使其他选择器的界面保持干净。

编辑：关于收藏

上述实现当前容易受到影响的一件事是，如果extendUserDataSelectorSelector的输出发生更改是因为其自身的依存选择器发生了变化，但是userSelector所获得的用户数据没有发生变化，实际的也没有发生变化extendUserDataSelectorSelector创建的计算实体。在这种情况下，您需要做两件事：

  1. 多重存储extendUserDataSelectorSelector返回的函数。我建议将其提取到单独的全局存储函数中。
  2. 包装someFunc，以便在返回数组时将其逐元素比较该数组与先前的结果，如果它们具有相同的元素，则返回先前的结果。

编辑：避免太多缓存

如上所述，在全局级别进行缓存当然是可行的，但是如果您考虑其他几个策略来解决问题，则可以避免这种情况：

  1. 不要急于扩展数据，而是将其推迟到实际呈现数据本身的每个React（或其他视图）组件中。
  2. 不要急于将id /基本对象的列表转换为扩展版本，而是让父母将这些id /基本对象传递给孩子。

在我的主要工作项目之一中，我一开始没有关注这些内容，希望我有。实际上，我后来不得不走全球记忆路线，因为这比重构所有视图更容易解决，这是应该做的，但我们目前没有时间/预算。

编辑2（我猜是4？）：关于收藏集pt。 1：多次记忆扩展器

注意：在完成本部分之前，假定要传递给扩展程序的基础实体将具有某种id属性，可以用来唯一地标识该属性，或者某种相似的属性可以廉价地从中获取。

为此，您可以像其他任何选择器一样记住扩展器本身。但是，由于您希望扩展程序记住其参数，因此您不想直接将State传递给它。

基本上，您需要一个多功能存储器，其基本功能与re-reselect对选择器的作用相同。 实际上，让createCachedSelector为我们做到这一点很简单：

function cachedMultiMemoizeN(n, cacheKeyFn, fn) {
  return createCachedSelector(
    // NOTE: same as [...new Array(n)].map((e, i) => Lodash.nthArg(i))
    [...new Array(n)].map((e, i) => (...args) => args[i]),
    fn
  )(cacheKeyFn);
}

function cachedMultiMemoize(cacheKeyFn, fn) {
  return cachedMultiMemoizeN(fn.length, cacheKeyFn, fn);
}

然后代替原来的extendUserDataSelectorSelector：

const extendUserDataSelectorSelector = createSelector(
  selectStuffThatExtendUserDataSelectorNeeds,
  (state) => state.something.else.it.needs,
  (stuff, somethingElse) =>
    // This function will be cached as long as
    // the results of the above two selectors
    // does not change, same as with any other cached value.
    (user) => {
      // your magic goes here.
      return {
        // ... user with stuff and somethingElse
      };
    }
);

我们具有以下两个功能：

// This is the main caching workhorse,
// creating a memoizer per `user.id`
const extendUserData = cachedMultiMemoize(
  // Or however else you get globally unique user id.
  (user) => user.id,
  function $extendUserData(user, stuff, somethingElse) {
    // your magic goes here.
    return {
      // ...user with stuff and somethingElse
    };
  }
);

// This is still wrapped in createSelector mostly as a convenience.
// It doesn't actually help much with caching.
const extendUserDataSelectorSelector = createSelector(
  selectStuffThatExtendUserDataSelectorNeeds,
  (state) => state.something.else.it.needs,
  (stuff, somethingElse) =>
    // This function will be cached as long as
    // the results of the above two selectors
    // does not change, same as with any other cached value.
    (user) => extendUserData(
      user,
      stuff,
      somethingElse
    )
);

extendUserData是真正的缓存发生的地方，尽管有一个警告：如果您有很多baseUser实体，它可能会变得很大。

编辑2（我猜是4？）：关于收藏集pt。 2：数组

数组是缓存存在的祸根：

  1. arrayOfSomeIds本身可能不会改变，但是指向其中的id可能具有的实体。
  2. arrayOfSomeIds可能是内存中的一个新对象，但实际上具有相同的ID。
  3. arrayOfSomeIds不变，但是包含引用实体的集合没有变化，但是这些特定id所引用的特定实体没有变化。

这就是为什么我主张将数组（和其他集合！）的扩展/扩展/验证/任何形式的授权委派到尽可能晚的数据获取-派生视图呈现过程的原因：杏仁核必须考虑所有这些。

也就是说，这并非不可能，只会带来一些额外的检查。

从上述someFunc的缓存版本开始：

const someFunc = createCachedSelector(
  userSelector,
  extendUserDataSelectorSelector,
  (data, $extendUserDataSelector) =>
    data.map($extendUserDataSelector)
// NOTE THIS PART DOWN HERE!
// This is how re-reselect gets the cache key.
)((state, id) => id);

然后我们可以将其包装在另一个仅缓存输出的函数中：

function keepLastIfEqualBy(isEqual) {
  return function $keepLastIfEqualBy(fn) {
    let lastValue;

    return function $$keepLastIfEqualBy(...args) {
      const nextValue = fn(...args);
      if (! isEqual(lastValue, nextValue)) {
        lastValue = nextValue;
      }
      return lastValue;
    };
  };
}

function isShallowArrayEqual(a, b) {
  if (a === b) return true;
  if (Array.isArray(a) && Array.isArray(b)) {
    if (a.length !== b.length) return false;
    // NOTE: calling .every on an empty array always returns true.
    return a.every((e, i) => e === b[i]);
  }
  return false;
}

现在，我们不能仅将其应用于createCachedSelector的结果，而只能应用于一组输出。相反，我们需要将其用于createCachedSelector创建的每个基础选择器。幸运的是，重新选择可以让您配置它使用的选择器创建器：

const someFunc = createCachedSelector(
  userSelector,
  extendUserDataSelectorSelector,
  (data, $extendUserDataSelector) =>
    data.map($extendUserDataSelector)
)((state, id) => id,
  // NOTE: Second arg to re-reselect: options object.
  {
    // Wrap each selector that createCachedSelector itself creates.
    selectorCreator: (...args) =>
      keepLastIfEqualBy(isShallowArrayEqual)(createSelector(...args)),
  }
)

奖励部分：数组输入

您可能已经注意到，我们只检查数组输出，涉及情况1和3，这可能就足够了。但是，有时您可能还需要捕获情况2，检查输入数组。 这可以通过使用重新选择的createSelectorCreator至make our own createSelector using a custom equality function

来实现 
import { createSelectorCreator, defaultMemoize } from 'reselect';

const createShallowArrayKeepingSelector = createSelectorCreator(
  defaultMemoize,
  isShallowArrayEqual
);

// Also wrapping with keepLastIfEqualBy() for good measure.
const createShallowArrayAwareSelector = (...args) =>
  keepLastIfEqualBy(
    isShallowArrayEqual
  )(
    createShallowArrayKeepingSelector(...args)
  );

// Or, if you have lodash available,
import compose from 'lodash/fp/compose';
const createShallowArrayAwareSelector = compose(
  keepLastIfEqualBy(isShallowArrayEqual),
  createSelectorCreator(defaultMemoize, isShallowArrayEqual)
);

这将进一步改变someFunc的定义，尽管只需更改selectorCreator：

const someFunc = createCachedSelector(
  userSelector,
  extendUserDataSelectorSelector,
  (data, $extendUserDataSelector) =>
    data.map($extendUserDataSelector)
)((state, id) => id, {
  selectorCreator: createShallowArrayAwareSelector,
});

其他想法

话虽如此，当您搜索reselect和re-reselect时，您应该尝试看看npm中显示的内容。那里的一些新工具可能对某些情况有用，也可能没有用。不过，您可以做很多事情，只需重新选择和重新选择，再加上一些满足您需要的额外功能。

答案 2 :(得分：3)

使用 private static bool VerifyRecaptchaResponse(string recaptchaResponse, string remoteIp) { var recaptchaApiUrl = ConfigurationManager.AppSettings["recaptchaApiUrl"]; var secret = ConfigurationManager.AppSettings["recaptchaSecretKey"]; var postData = string.Format(CultureInfo.InvariantCulture, "&secret={0}&remoteip={1}&response={2}", secret, remoteIp, recaptchaResponse); var postDataAsBytes = Encoding.UTF8.GetBytes(postData); var request = WebRequest.Create(recaptchaApiUrl); request.Method = "POST"; request.ContentType = "application/x-www-form-urlencoded"; request.ContentLength = postDataAsBytes.Length; var dataStream = request.GetRequestStream(); dataStream.Write(postDataAsBytes, 0, postDataAsBytes.Length); dataStream.Close(); var response = request.GetResponse(); using (var stream = response.GetResponseStream()) { if (stream == null) return false; using (var reader = new StreamReader(stream)) { var serializer = new JavaScriptSerializer(); var text = reader.ReadToEnd(); var responseFromServer = serializer.DeserializeObject(text) as Dictionary<string, object>; if (responseFromServer == null) return false; if (responseFromServer.ContainsKey("success") == false) return false; if (responseFromServer["success"] is bool == false) return false; return (bool)responseFromServer["success"]; } } } 时遇到的问题是不支持动态依赖项跟踪。选择器需要预先声明状态的哪一部分会导致重新计算。

>

例如，我有一个在线用户ID列表，以及一个用户映射：

reselect

我想选择一个在线用户列表，例如{ onlineUserIds: [ 'alice', 'dave' ], notifications: [ /* unrelated data */ ] users: { alice: { name: 'Alice' }, bob: { name: 'Bob' }, charlie: { name: 'Charlie' }, dave: { name: 'Dave' }, eve: { name: 'Eve' } } } 。

由于我无法预先知道哪些用户将在线，所以我需要声明对商店的整个[ { name: 'Alice' }, { name: 'Dave' } ]分支的依赖性：

Example 1

这可行，但这意味着更改不相关的用户（bob，charlie，eve）将重新选择选择器。

我认为这是重新选择的基本设计选择中的一个问题：选择器之间的依赖关系是静态的。（相反，Knockout，Vue和MobX确实支持动态依赖关系。）

我们遇到了同样的问题，我们想到了@taskworld.com/rereselect。无需预先声明和静态声明依赖关系，而是在每次计算过程中实时并动态地收集依赖关系：

Example 2

这使我们的选择器可以更精细地控制哪个状态部分可以导致重新计算选择器。

答案 3 :(得分：0)

Recompute是重新选择的替代方法，它实现了动态依赖关系跟踪，并允许将任意数量的参数传递给选择器，您可以检查是否可以解决您的问题

相关问题
最新问题