ts-action-operators

What is it?

The ts-action-operators package contains RxJS operators for action observables.

Why might you need it?

I created the ts-action package because I wanted a mechanism for declaring and consuming actions that involved writing as little boilerplate as possible. And I created this package so that I could apply the TypeScript narrowing mechanisms in ts-action to the composition of NgRx effects and redux-observable epics.

If you, too, want less cruft in your effects or epics, you might find this package useful.

For an in-depth look at TypeScript, Redux and ts-action, have a look at: How to Reduce Action Boilerplate.

Install

Install the package using npm:

npm install ts-action-operators --save

Usage

The package includes operators for filtering and narrowing actions and for selecting strongly typed payloads. The operators can be used in NgRx effects or redux-observable epics, like this:

1import { ofType, toPayload } from "ts-action-operators";
2const epic = actions => actions.pipe(
3  ofType(foo),
4  toPayload(),
5  tap(payload => console.log(payload.foo)),
6  ...
7);

Using pipe is recommended; however, if you use a version of RxJS that does not include pipe, you can use let instead:

1import { ofType, toPayload } from "ts-action-operators";
2import "rxjs/add/operator/let";
3const epic = actions => actions
4  .let(ofType(foo))
5  .let(toPayload())
6  .do(payload => console.log(payload.foo))
7  ...

API

• act
• ofType
• toPayload

act

The act operator is a convenience operator that facilitates the mapping of an input action to an output action with as little boilerplate as possible and with some sensible defaults. It also ensures that errors are handled and that catchError is called in the correct location.

act can be passed a project function and error selector, like this:

1.pipe(
2  ofType(thingRequested),
3  act(
4    ({ id }) => things.get(id).pipe(
5      map(thing => thingFulfilled(thing))
6    ),
7    (error, { id }) => thingRejected(id, error)
8  )
9)

Which is equivalent to:

1.pipe(
2  ofType(thingRequested),
3  concatMap(
4    ({ id }) => things.get(id).pipe(
5      map(thing => thingFulfilled(thing)),
6      catchError(error => thingRejected(id, error))
7    )
8  )
9)

act can also be passed a config object that includes optional complete, operator and unsubscribe properties:

1.pipe(
2  ofType(thingRequested),
3  act({
4    ({ id }) => things.get(id).pipe(
5      map(thing => thingFulfilled(thing))
6    ),
7    error: (error, { id }) => thingRejected(id, error),
8    unsubscribe: (_ , { id }) => thingCancelled(id),
9    operator: switchMap
10  })
11)

The unsubscribe callback is called if the observable returned from project is unsubscribed before a complete or error notification is emitted. The complete and unsubscribe callbacks are passed the number of actions emitted by the observable returned from project and the input action.

ofType

The ofType operator can be passed ts-action-declared action creators. The operator will remove unwanted actions from the observable stream.

If only a single action creator is specified, the action's type will be narrowed. For example:

1.pipe(
2  ofType(foo),
3  tap(action => {
4    // Here, TypeScript has narrowed the type, so the action is strongly typed
5    // and individual properties can be accessed in a type-safe manner.
6  })
7)

If multiple action creators are specified - in an array literal - the action's type will be narrowed to a union:

1.pipe(
2  ofType([foo, bar]),
3  tap(action => {
4    // Here, the action has been narrowed to either a FOO or a BAR action.
5    // Common properties will be accessible, other will require further narrowing.
6    if (isType(action, foo)) {
7      // Here, the action has been narrowed to a FOO action.
8    } else if (isType(action, bar)) {
9      // Here, the action has been narrowed to a BAR action.
10    }
11  })
12)

toPayload

The toPayload operator takes no parameters. It can be applied to an obserable stream that emits narrowed actions that contain payloads. For example:

1.pipe(
2  ofType(foo),
3  toPayload()
4  tap(payload => {
5    // Here, TypeScript has narrowed the type, so the payload is strongly typed
6    // and individual properties can be accessed in a type-safe manner.
7  })
8)