javascript - 重新选择选择器结构

Question

我有以下示例结构..

userId: {
  savedEvents: {
     eventId: true,
     eventId: true,
     eventId: true,
  },
  organisedEvents: {
     eventId: true,
     eventId: true,
     eventId: true,
  },
  attendingEvents: {
     eventId: true,
     eventId: true,
     eventId: true,
  }
}

我正在使用 reselects createSelector 方法尝试链接选择器以实现内存优化和业务逻辑的重用。

例如:-

userOrganisedEventsSelector

返回组织的事件 ID 列表。

activeUserOrganisedEventsSelector

使用已应用一组过滤器的 userOrganisedEventsSelector 的输出

sortedActiveUserOrganisedEventsSelector 

对 activeUserOrganisedEventsSelector 的输出进行排序

上述三个方法接受一个包含 userId 的 prop 对象，然后可以从中确定组织的事件。

问题:-

1. 我希望所有三种事件类型(savedEvents、organisedEvents 和 attendingEvents)都具有相同的功能

2. 在某些情况下，我希望 userId 由 props 提供，其他时候我需要使用状态中的 userId。

我正在寻求有关如何实现这一目标的帮助或建议，无需创建 30 个奇怪的函数，同时保持通过重新选择内存的好处。

Answer 1

我建议你给 re-reselect一试。这是一个很小的 ​​reselect 包装器，当我发现自己在与您类似的场景中编写了几乎相同的选择器时，我编写了它。

它将允许您在传递不同的参数(例如，您的 userID)时不重复选择器代码并更好地管理选择器缓存。

这里有几行伪代码，只是让你走上正轨:

import createSelector from 'reselect';
import createCachedSelector from 're-reselect';

// Normal reselect selector:
// getUserEvents(state, userId)
const getUserEvents = createSelector(
  state => state.events
  (state, userId) => userId,            // Get user from state if userId not provided
  (events, userId) => events[userId],   // Return user's events
);

// Cached re-reselect selector (cached by eventType):
// getUserEventsOfType(state, userId, eventType = 'ALL')
const getUserEventsOfType = createCachedSelector(
  getUserEvents,                        // Get events from getUserEvents
  (state, userId, eventType = 'ALL') => eventType,
  (userEvents, eventType) => userEvents[eventType]  // Just pseudo code!
)(
  // Keep memoization when calling selector with different eventType
  (state, userId, eventType = 'ALL') => eventType,
);