How do I pass additional parameters to combined selectors? I am trying to
• Get data
• Filter data
• Add custom value to my data set / group data by myValue
JavaScript
x
27
27
1
export const allData = state => state.dataTable
2
export const filterText = state => state.filter.get('text')
3
4
export const selectAllData = createSelector(
5
allData,
6
(data) => data
7
)
8
9
export const selectAllDataFiltered = createSelector(
10
[ selectAllData, filterText ],
11
(data, text) => {
12
return data.filter(item => {
13
return item.name === text
14
})
15
}
16
)
17
18
export const selectWithValue = createSelector(
19
[ selectAllDataFiltered ],
20
(data, myValue) => {
21
console.log(myValue)
22
return data
23
}
24
)
25
26
let data = selectWithValue(state, 'myValue')
27
console.log(myValue)
returns undefined
Advertisement
Answer
Updated: 16 February 2022
New Solution from Reselect 4.1: See detail
JavaScript
1
17
17
1
// selector.js
2
const selectItemsByCategory = createSelector(
3
[
4
// Usual first input - extract value from `state`
5
state => state.items,
6
// Take the second arg, `category`, and forward to the output selector
7
(state, category) => category
8
],
9
// Output selector gets (`items, category)` as args
10
(items, category) => items.filter(item => item.category === category)
11
);
12
13
// App.js
14
const items = selectItemsByCategory(state, 'javascript');
15
// Another way if you're using redux hook:
16
const items = useSelector(state => selectItemsByCategory(state, 'javascript'));
17
Updated: 6 March 2021
Solution from Reselect: See detail
JavaScript
1
19
19
1
// selector.js
2
import { createSelector } from 'reselect'
3
import memoize from 'lodash.memoize'
4
5
const expensiveSelector = createSelector(
6
state => state.items,
7
items => memoize(
8
minValue => items.filter(item => item.value > minValue)
9
)
10
)
11
12
// App.js
13
const expensiveFilter = expensiveSelector(state)
14
// Another way if you're using redux:
15
// const expensiveFilter = useSelector(expensiveSelector)
16
17
const slightlyExpensive = expensiveFilter(100)
18
const veryExpensive = expensiveFilter(1000000)
19
Old:
This is my approach. Creating a function with parameters and return function of reselect
.
JavaScript
1
10
10
1
export const selectWithValue = (CUSTOM_PARAMETER) => createSelector(
2
selectAllDataFiltered,
3
(data) => {
4
console.log(CUSTOM_PARAMETER)
5
return data[CUSTOM_PARAMETER]
6
}
7
)
8
9
const data = selectWithValue('myValue')(myState);
10