CODEWITHSUNDEEP
reactjsselectreduxreselect
RMT
RMT

Reputation: 1162

Difference between createSelector(...) and () => createSelector(...)

Can anyone tell me the difference between these two type of usage of the reselectors, and tell me when to use which?

// First type of selector, without arrow function
export const selectMyValue = createSelector(
  rootSelector,
  state => state.get('someValue'),
)

// Second type of selector, with arrow function
export const selectMyValue = () => createSelector(
  rootSelector,
  state => state.get('someValue'),
)

Upvotes: 1

Views: 1539

Answers (3)

Александр Алябушев
Александр Алябушев

Reputation: 1

Check https://github.com/reduxjs/reselect . See chapter: Sharing Selectors with Props Across Multiple Component Instances. Reason of creating selector factory also is described above the chapter:

A selector created with createSelector has a cache size of 1 and only returns the cached value when its set of arguments is the same as its previous set of arguments. If we alternate between rendering <VisibleTodoList listId="1" /> and <VisibleTodoList listId="2" />, the shared selector will alternate between receiving {listId: 1} and {listId: 2} as its props argument. This will cause the arguments to be different on each call, so the selector will always recompute instead of returning the cached value. We’ll see how to overcome this limitation in the next section.

Another words, you need create own cached selector for each instance of component.

Upvotes: 0

Andrea Carraro
Andrea Carraro

Reputation: 10419

The first one is a simple selector directly consumable by your application like:

selectMyValue(state);

The second one is a selector factory, in other words a function which returns a totally new selector instance on every call.

const selectMyValue1 = selectMyValueFactory();
const selectMyValue2 = selectMyValueFactory();

// Calls to the following selectors won't invalidate each other's cache
selectMyValue1(state);
selectMyValue2(state);

Upvotes: 0

mehamasum
mehamasum

Reputation: 5732

difference between these two type

The first example assign selectMyValue to whatever createSelector is returning. Therefore you can call it with your state:

const value = selectMyValue(someState)

Whereas the second example is returning a function that wrapped the createSelector. But the createSelector is not called yet. You will use that function to call it later:

const wrapped = selectMyValue();
const value = wrapped(someState);

or one liner:

const value = selectMyValue()(someState);

when to use which?

You will probably going to use the first one in most cases. However there may arise some case when you need to provide some arguments to your wrapper function.

For example:

export const selectMyValue = (value) => createSelector(
  rootSelector,
  state => state[value] // just an example
)

Here your wrapper takes an argument named value. You can call it as utility to extract different parts of state:

const valueFromState = selectMyValue('someValue')(state);
const someOtherValueFromState = selectMyValue('someOtherValue')(state);

Upvotes: 4

Related Questions