Tim Deschryver

Use case

You want to periodically the refresh data in the NgRx Store.

Solution

Create a NgRx Effect that retrieves the data via a service every x minutes, this can be done with the RxJS timer operator.

Download•Share
refresh$ = createEffect(() => {
  // every 10 minutes
  return timer(0, 600000).pipe(
    switchMap(() =>
      this.customersService.get().pipe(
        map(data => refreshSuccess(data)),
        catchError(response => refreshFailed(response)),
      ),
    ),
  )
})

Use case

I want to delete a property from an object in a pure (immutable) way.

Solution

Use a destructuring assignment to assign the to be removed property to a variable, while cloning the "rest" properties to a new variable. The _ is used to prevent a linter giving the warning "variable is declared but its value is never read".

Download•Share
const { password: _, ...user } = {
  id: 47,
  username: 'tim',
  password: 'iliketrains',
}

console.log(user)
// |> { id: 47, username: 'tim' }

For more examples see Destructuring assignment on MDN

Use case

An action to fetch multiple entities at once, but the service has only an endpoint to fetch one entity at a time.

Solution

Use the RxJS merge operator to flatten all request streams and concurrently emit all values to a single output stream.

Download•Share
refresh$ = createEffect(() =>
  this.actions$.pipe(
    ofType(CustomerActions.refresh),
    exhaustMap(({ customerIds }) =>
      merge(
        ...ids.map(id =>
          this.customersService.getCustomer(id).pipe(
            map(CustomerActions.getCustomerSuccess),
            catchError(err =>
              of(CustomerActions.getCustomerFailed(id, err.message)),
            ),
          ),
        ),
      ),
    ),
  ),
)