重新选择选择器结构

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

Returns 组织的事件 ID 列表。

activeUserOrganisedEventsSelector

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

sortedActiveUserOrganisedEventsSelector

对 activeUserOrganisedEventsSelector 的输出进行排序

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

问题:-

我希望所有三种事件类型（savedEvents、organisedEvents 和 attendingEvents）具有相同的功能
在某些情况下我希望 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,
);

重新选择选择器结构

Reselect selectors structure

javascript

reactjs

redux

reselect