Menu
Newbie question: I have an angular2 app using ngrx, I have a service that returns the state (array of observables) to a component.
My question is where do I filter the state if I want a read only subset of it to be used in the component?
Do I do it in the reducer, service, or component?
235
Small solid-state filters, discriminators, and multiplexers that contain yttrium-iron-garnet crystals used in combination with a variable magnetic field to accomplish wideband tuning in microwave circuits. From: Modern Dictionary of Electronics (Seventh Edition), 1999.
To filter an array of objects in React: Call the filter() method on the array. On each iteration, check if a certain condition is met. The Array. filter methods returns an array with all elements that satisfy the condition.
A filter is a circuit capable of passing (or amplifying) certain frequencies while attenuating other frequencies. Thus, a filter can extract important frequencies from signals that also contain undesirable or irrelevant frequencies. In the field of electronics, there are many practical applications for filters.
Filtering in React The use of filter() translates one-to-one to the React world. Given the filtering functions and general example above, you can create the following component: // ... const App = () => { const [input] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); return ( <div> <div>Even: {input.
Some guidance can be found in the ngrx example application. There is a pattern in which selectors are defined alongside reducers:
/**
* Because the data structure is defined within the reducer it is optimal to
* locate our selector functions at this level. If store is to be thought of
* as a database, and reducers the tables, selectors can be considered the
* queries into said database. Remember to keep your selectors small and
* focused so they can be combined and composed to fit each particular
* use-case.
*/
export function getBookEntities() {
return (state$: Observable<BooksState>) => state$
.select(s => s.entities);
};
And those selectors are used in (smart) components to select/filter the state:
...
export class CollectionPage {
books$: Observable<BooksInput>;
constructor(store: Store<AppState>) {
this.books$ = store.let(getBookCollection());
}
}
This pattern/mechanism could be used to filter the state in either components or services - whichever best suits your architecture.
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
