Support groups of selectors

[anikolaev]

There are 27 files in my selectors folder and they share selector names like id so it is always useless to see a flat structure. Here is the picture after registering only 4 of 27 files:

Here is a typical structure of my files containing selectors and how I register them. Maybe I am doing something wrong.

selectors/accessTokens.js

import { createSelector } from 'reselect'

import * as entities from './entities'

const ids = state => {
  return state.accessTokensList.get('accessTokenIds')
}

export const fetching = (state) => {
  return state.accessTokensList.get('fetching')
}

export const listEntities = createSelector(
  ids, entities.accessTokens,
  (ids, entities) => ids.map(id => entities.get(`${id}`))
)
...

selectors/entities.js

import { Map } from 'immutable'

export const ticketingSystems = state => state.entities.get('ticketingSystems') || Map()
export const tickets = state => state.entities.get('tickets') || Map()
export const ticketFieldValues = state => state.entities.get('ticketFieldValues') || Map()
...

selectors/audits.js

import { createSelector } from 'reselect'

import * as entities from './entities'

const ids = state => {
  return state.auditsList.get('auditIds')
}

export const fetching = (state) => {
  return state.auditsList.get('fetching')
}

export const listEntities = createSelector(
  ids, entities.audits,
  (ids, entities) => ids.map(id => entities.get(`${id}`))
)

export const selectedAuditId = (state) => {
  return state.auditsList.get('selectedAuditId') || null
}

export const selectedAudit = createSelector(
  selectedAuditId, entities.audits,
  (id, entities) => entities.get(`${id}`)
)
...

...

selectors/index.js

import * as accessTokens from './accessTokens'
import * as audits from './audits'
import * as ticketStatuses from './ticketStatuses'
import * as entities from './entities'

export {
  accessTokens,
  audits,
  ticketStatuses,
  entities
}

store.js

import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createSagaMiddleware from 'redux-saga'
import createRootReducer from 'reducers/rootReducer'
import { appHistory } from 'appHistory'
import root from 'sagas/root'

import * as selectors from 'selectors'
import * as ReselectTools from 'reselect-tools'

const connectedRootReducer = createRootReducer(appHistory)
const initialState = {}
const sagaMiddleware = createSagaMiddleware()

const middleware = [
  routerMiddleware(appHistory),
  sagaMiddleware
]

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const enhancer = composeEnhancers(
  applyMiddleware(...middleware)
)

const store = createStore(connectedRootReducer, initialState, enhancer)
sagaMiddleware.run(root)

ReselectTools.getStateWith(() => store.getState())
ReselectTools.registerSelectors(selectors.accessTokens)
ReselectTools.registerSelectors(selectors.audits)
ReselectTools.registerSelectors(selectors.ticketStatuses)
ReselectTools.registerSelectors(selectors.entities)

export { store }

I think there should be a way to add selectors specifying the name it their groups like 'audits', 'entities' etc. In the code they are imported as

import * as auditsSelector from 'selectors/audits'

so it will be clear for developers.

[anikolaev]

I understand that the extension just shows what it gets from reselect-tools lib so I here I just wish to see selectors groupped and not overlapped and I'll create similar issue in the reselect-tools lib.

[skortchmark9]

Okay, sounds good. To minimize confusion about which repo to file issues in, I'm combining them on #24 .