docs(store): add docs for selector with props #1233

timdeschryver · 2018-08-06T18:55:29Z

No description provided.

coveralls · 2018-08-06T19:03:35Z

Coverage remained the same at 88.618% when pulling 442b167 on timdeschryver:pr/selector-with-props-docs into d34b88a on ngrx:master.

brandonroberts · 2018-08-08T00:59:16Z

docs/store/selectors.md

+  );
+```
+
+See the [StackBlitz example](https://stackblitz.com/edit/create-selector-props?file=src%2Fapp%2Freducers%2Findex.ts).


Remove the StackBlitz example link. If we're going to link to live examples, we need to come up with a way to version and generate them from the repo.

brandonroberts · 2018-08-08T01:12:57Z

docs/store/selectors.md

+
+Keep in mind that a selector only keeps the previous input arguments in its cache. Meaning that if you would re-use this selector but with another multiply factor, the selector would always have to re-evaluate its value. This is because it's receiving both of the multiply factors (e.g. one time `2`, the other time `4`). In order to correctly memoize the selector we can wrap the selector inside a factory function, so that the component can create its own instance of the selector.
+
+If we add multiple counters in the above example (the counters are differentiated by `id`), our component's selectors are now calling the factory function to create different selector instances:


The following is an example os using multiple counters differentiated by id. The component's selectors ...

brandonroberts · 2018-08-08T01:13:36Z

docs/store/selectors.md

+}
+```
+
+And the selector becomes:


This example should be above the counter factory example

brandonroberts · 2018-08-08T01:14:25Z

docs/store/selectors.md

+}
+```
+
+The last argument of a selector or a projector is the `props` argument, for our example it looks as follows:


Move this example above the previous one to show how you create a selector with props

brandonroberts · 2018-08-08T01:14:45Z

docs/store/selectors.md

@@ -79,6 +79,53 @@ export const selectVisibleBooks = createSelector(
 );
 ```

+### createSelector with props
+
+Sometimes you want to select a piece of store state based on data that isn't available in the store state,


"To select a piece of state ... isn't available in the store, pass props to the selector function."

brandonroberts · 2018-08-08T01:20:21Z

docs/store/selectors.md

+);
+```
+
+Keep in mind that a selector only keeps the previous input arguments in its cache. Meaning that if you would re-use this selector but with another multiply factor, the selector would always have to re-evaluate its value. This is because it's receiving both of the multiply factors (e.g. one time `2`, the other time `4`). In order to correctly memoize the selector we can wrap the selector inside a factory function, so that the component can create its own instance of the selector.


"Meaning that if you would..." -> "If you re-use this selector with another..."

"we can wrap" -> "wrap"

davidtlee · 2018-08-23T04:38:25Z

@timdeschryver I have a question just to see if I'm understanding this. What would the benefit of the "props" syntax be over just passing parameters into a selector function? For example, what's the difference between the following two versions:

Version 1:

this.store.pipe(select(getCount, { multiple: 10 }))

export getCount = createSelector(
  getCounterValue,
  (counter, props) => counter * props.multiply
)

Version 2

this.store.pipe(select(getCount(10)))

export getCount = (multiply) => createSelector(
  getCounterValue,
  (counter) => counter * multiply
)

timdeschryver · 2018-08-23T06:00:26Z

In the example you wrote the behavior will be the same.
The only difference is that props will also get passed to the getCounterValue selector.

davidtlee · 2018-08-28T19:45:33Z

Ah, got it, thanks!

timdeschryver mentioned this pull request Aug 6, 2018

feat(Store): createSelector pass props to projector function #1210

Merged

brandonroberts requested changes Aug 8, 2018

View reviewed changes

docs(Store): add docs for selector with props

442b167

timdeschryver force-pushed the pr/selector-with-props-docs branch from ba0e7df to 442b167 Compare August 8, 2018 10:27

brandonroberts approved these changes Aug 16, 2018

View reviewed changes

brandonroberts changed the title ~~docs(Store): add docs for selector with props~~ docs(store): add docs for selector with props Aug 16, 2018

brandonroberts merged commit 617d198 into ngrx:master Aug 16, 2018

timdeschryver deleted the pr/selector-with-props-docs branch August 16, 2018 12:28

nadavsinai mentioned this pull request Sep 2, 2019

RFC: feat(selectors): SelectorFactoryWithCache - allow to re-use selectors for props #2104

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(store): add docs for selector with props #1233

docs(store): add docs for selector with props #1233

timdeschryver commented Aug 6, 2018

coveralls commented Aug 6, 2018 •

edited

Loading

brandonroberts Aug 8, 2018

brandonroberts Aug 8, 2018

brandonroberts Aug 8, 2018

brandonroberts Aug 8, 2018

brandonroberts Aug 8, 2018

brandonroberts Aug 8, 2018

brandonroberts Aug 8, 2018

davidtlee commented Aug 23, 2018 •

edited

Loading

timdeschryver commented Aug 23, 2018

davidtlee commented Aug 28, 2018


		Keep in mind that a selector only keeps the previous input arguments in its cache. Meaning that if you would re-use this selector but with another multiply factor, the selector would always have to re-evaluate its value. This is because it's receiving both of the multiply factors (e.g. one time `2`, the other time `4`). In order to correctly memoize the selector we can wrap the selector inside a factory function, so that the component can create its own instance of the selector.

		If we add multiple counters in the above example (the counters are differentiated by `id`), our component's selectors are now calling the factory function to create different selector instances:

docs(store): add docs for selector with props #1233

docs(store): add docs for selector with props #1233

Conversation

timdeschryver commented Aug 6, 2018

coveralls commented Aug 6, 2018 • edited Loading

brandonroberts Aug 8, 2018

Choose a reason for hiding this comment

brandonroberts Aug 8, 2018

Choose a reason for hiding this comment

brandonroberts Aug 8, 2018

Choose a reason for hiding this comment

brandonroberts Aug 8, 2018

Choose a reason for hiding this comment

brandonroberts Aug 8, 2018

Choose a reason for hiding this comment

brandonroberts Aug 8, 2018

Choose a reason for hiding this comment

brandonroberts Aug 8, 2018

Choose a reason for hiding this comment

davidtlee commented Aug 23, 2018 • edited Loading

timdeschryver commented Aug 23, 2018

davidtlee commented Aug 28, 2018

coveralls commented Aug 6, 2018 •

edited

Loading

davidtlee commented Aug 23, 2018 •

edited

Loading