reselect-mapper

this is a small package that will help us to define and use your selectors in a clean, easy and fast way.

more specifically it will help us to

• define all our selectors in a linear way
• one and only one way to combine selecotrs
• use named selector hooks to avoid importing a lot of selectors in a file and have a fast access to all our selectors.

Install

1npm install --save reselect-mapper

Package content

Here are what we can import from the package

• mapSelectors
• createParamsSelectorHook
• createNamedSelectorHook,

1import {
2  mapSelectors,
3  createParamsSelectorHook,
4  createNamedSelectorHook
5} from 'reselect-mapper'

mapSelectors

this helper uses createSelector from reselect and brings out 2 main benefits

• a simple way to combine selectors using records

1import { mapSelectors } from 'reselect-mapper'
2
3const getMin = (state: State) => state.min
4const getMax = (state: State) => state.max
5// now if we want to get the difference between the max and the min,
6// taking account of the state offset, we can proceed like this
7const getOffsetDiff = mapSelectors(
8  // selectors are passed using a record,
9  // so the mapping is done directly here
10  { min: getMin, max: getMax },
11  (
12    map, // map signature is { min: number, max: number }, => low risk to have typos when accessing selected value
13    state: State
14  ) => state.offset + map.max - map.min
15)

• no extra efforts needed when combining selectors with params: the synthax does not change

1const getUserById = (state: State, id: string) => state.users[id]
2const getPostByIndex = (state: State, index: number) => state.posts[index]
3
4const getUserAndPost = mapSelectors(
5  { user: getUserById, post: getPostByIndex },
6  (map) => map // map here is { user: User, post: Post }
7)

instead if we used createSelector from reselect package, the synthax would be a curry function and a bit complex

1const getUserById = (id: string) => (state: State) => state.users[id]
2const getPostByIndex = (index: number) => (state: State) => state.posts[index]
3
4const getUserAndPost = (id: string, index: number) =>
5  // curry function
6  createSelector(
7    // selectors are passed in an array and should not be curry functions
8    [
9      // so we need to pass all the parameters again here
10      getUserById(id),
11      getPostByIndex(index)
12    ],
13    // the mapping is done in the callback params
14    // => high risk of introducing bad mapping while dealing with a lot of selectors:
15    // => we can easily define (post, user) => any instead of (user, post) => any
16    (user, post) => ({
17      user,
18      post
19    })
20  )

let's now have a look to this selectors.ts file example to see how it will look like in a real project

1import { mapSelectors } from 'reselect-mapper'
2type State = {
3  group: string
4  creationDate: string
5  users: { [K: string]: User }
6  posts: { [K: number]: Post }
7}
8// no params selector
9export const getGroup = (state: State) => state.group
10export const getCreationDate = (state: State) => state.creationDate
11// selector with params
12export const getUserById = (state: State, id: string) => state.users[id]
13export const getPostByIndex = (state: State, index: number) => state.posts[index]
14// combining no params selectors
15export const getGroupAndCreationDate = mapSelectors(
16  // selectors record
17  { group: getGroup, date: getCreationDate },
18  (map) => map // map signature is { group: string, date: string }
19)
20// this will return the following selector
21// (state: State) => { group: string, date: string }
22
23// mixing selectors where some of them require params: same synthax as before
24export const getUserAndGroup = mapSelectors(
25  {  user: getUserById, group: getGroup, },
26  (map) => map // map signature is  { user: User, group: string }
27)
28// this will return the following selector
29// (state: State, params: { user: string }) => { user: User, group: string }
30
31// here you can notice that, the params is a record and has only one key
32// "user" which is what will be passed to getUserById selector.
33
34// combining selectors where all of them require params: again same synthax
35export const getUserAndPost = mapSelectors(
36  {  user: getUserById, post: getPostByIndex },
37  (map) => map // map signature is { user: User, post: post }
38)
39// this will return the following selector
40// (state: State, params: { user: string, post: number })
41//            => {  user: User, post: Post }
42
43// here instead, we passed 2 selectors and the params record has also 2 keys
44// "user": parameter to be passed to getUserById selector
45// "post": parameter to be passed to getPostByIndex selector
46}

now we we can use these selectors in our component MyComponent.tsx let's first try to use useSelector from react-redux

1import { useSelector } from 'react-redux'
2
3import {
4  getGroup,
5  getUserById,
6  getCreationDate,
7  getGroupAndCreationDate,
8  getUserAndGroup,
9  getUserAndPost
10} from './selectors'
11
12const MyComponent = () => {
13  // how to use a no params selector
14  const group = useSelector(getGroup)
15  const date = useSelector(getCreationDate)
16  // how to use a no params combined selector
17  const groupAndDate = useSelector(getGroupAndCreationDate)
18  // how to use a selector with params
19  const user = useSelector((state) => getUserById(state, 'userId'))
20  const userAndGroup = useSelector((state) =>
21    getUserAndGroup(state, { user: 'userId' })
22  )
23  const userAndPost = useSelector((state) =>
24    getUserAndPost(state, {
25      user: 'userId',
26      post: 3
27    })
28  )
29  return <div>test</div>
30}

createParamsSelectorHook

as we could notice, when it comes to pass parameters to the selector using the standard useSelector from redux, we have to use a curry function. but we can remove it by creating a params selector hook

creating a params selector hook using store

1import { createStore } from 'redux'
2import reducers, { initialState } from './reducers'
3import { createParamsSelectorHook } from 'reselect-mapper'
4
5const store = createStore(reducers, initialState)
6const useSelector = createParamsSelectorHook(store)
7
8// now we can use it like this
9const value1 = useSelector(selectorWithNoParams)
10const value2 = useSelector(selectorWithParams, params)

creating a params selector hook using useSelector hook

1import { useSelector as useDefaultSelector } from 'react-redux'
2import { createParamsSelectorHook } from 'reselect-mapper'
3
4const useSelector = createParamsSelectorHook(useDefaultSelector)
5
6// now we can use it like follows
7const value1 = useSelector(selectorWithNoParams)
8const value2 = useSelector(selectorWithParams, params)

createNamedSelectorHook

in the previous example we saw how to use our selectors but one thing we can notice is that we had to import all the desired selectors in our component file. And this is an operation we will often do. That means, we should deal many times with the following situations:

• repetitive imports: we are importing the same selector functions many times in different files => more line of codes => more file size

• conflicting selectors: let's imagine we have both getX and getY from ./pippo/selectors.ts and ./pluto/selectors.ts. it can happen to import the wrong getX or the wrong getY due to the multiple imports we can have in our file. But more often, we'll have to import both of them in the same file, and in this case, to avoid conflictual imports, we need to rename all those selectors like follows:

1import { getX as getPippoX, getY as getPippoY } from '/pippo/selectors'
2import { getX as getPlutoX, getY as getPlutoY } from '/pluto/selectors'

these situations are not a big deal, but since they will come over and over in our daily work, using a named selector hook will eventually have a global impact at the end of the day because it will help us to have a clean file with less imports, to avoid selectors conflict and have a fast access to all our selectors.

so let's then define a hooks.ts file where we can create our a named selector hook and see how to use it

we need the selectors records and either the store or the default useSelector to create named hooks

1import { createNamedSelectorHook } from 'reselect-mapper'
2import { useSelector, shallowEqual, createSelectorHook } from 'react-redux'
3import { store } from './configs'
4import * as userSelectors from './selectors'
5
6// creating useUserSelectors from store
7export const useUserSelectors = createNamedSelectorHook(store)(userSelectors)
8
9// creating useUserSelectors from useSelector
10export const useUserSelectorsShallEq = createNamedSelectorHook(useSelector)(
11  userSelectors
12)
13
14const useShallowEqualSelector = (selector: Selector) =>
15  useSelector(selector, shallowEqual)
16// creating useUserSelectors from useShallowEqualSelector
17export const useUserSelectorsShallEq = createNamedSelectorHook(
18  useShallowEqualSelector
19)(userSelectors)
20
21const useSelectorInSomeContext = createSelectorHook(myContext)
22// creating useUserSelectors from useSelectorInSomeContext
23export const useUserSelectorsInContext = createNamedSelectorHook(
24  useSelectorInSomeContext
25)(userSelectors)

now we defined the useUserSelectors, we can change the MyComponent.tsx file removing all the imported selectors, import only our named hook and use it instead of useSelector

1// we have only 1 import here instead of 7
2import { useUserSelectors } from './hooks'
3// import { useSelector } from 'reselect-mapper'
4/*import {
5  getGroup,
6  getUserById,
7  getCreationDate,
8  getGroupAndCreationDate,
9  getUserAndGroup,
10  getUserAndPost
11  } from './selectors'
12  */
13
14const MyComponent = () => {
15  // how to use a no params selector
16  const group = useUserSelectors('getGroup')
17  const date = useUserSelectors('getCreationDate')
18  // how to use a no params combined selector
19  const groupAndDate = useUserSelectors('getGroupAndCreationDate')
20  // how to use a selector with params
21  const user = useUserSelectors('getUserById', 'userId')
22  const userAndGroup = useUserSelectors('getUserAndGroup', { user: 'userId' })
23  const userAndPost = useUserSelectors('getUserAndPost', {
24    user: 'userId',
25    post: 3
26  })
27  return <div>test</div>
28}

Also here, the named selector hook accepts 1 or 2 arguments.

• the selector name: first and required argument, a string reference of a desired selector
• the selector's parameter: required if the given selector from the selector name requires a parameter

as you can see, in this case, we directly also avoid selectors names conflicts

1// import { getX as getPippoX, getY as getPippoY } from '/pippo/selectors'
2// import { getX as getPlutoX, getY as getPlutoY } from '/pluto/selectors'
3import { usePippoSelectors } from '/pippo/hooks'
4import { usePlutoSelectors } from '/pluto/hooks'
5
6const MyComponent = () => {
7  const pippoX = usePippoSelectors('getX')
8  const plutoX = usePlutoSelectors('getX')
9  return <div>test</div>
10}

try it out! see this code sandbox example

see also

• react-requests-manager
• react-hooks-in-callback
• react-context-selector

License

MIT © https://github.com/fernandoem88/react-context-selector