typescript-fsa is a simple Action Creator library for TypeScript. Its goal is to provide simple yet type-safe experience with Flux actions. Created actions are FSA-compliant.

1. Redux Action Creators
01.12.2017

2. Common approach
• export const GetOrderAction = (orderId: string) => ({
type: OrdersActions.GET_ORDER_ACTION,
id: orderId,
});
• export const DoneGetOrderAction = (response: any) => ({
type: OrdersActions.DONE_GET_ORDER_ACTION,
response: response,
});
• export const FailedGetOrderAction = (error: Error) => ({
type: OrdersActions.FAILED_GET_ORDER_ACTION,
success: false,
error: error,
});

3. Problems
• A lot of boilerplate for async actions:
started, done, failed
• Parameters for the actions are not standartized:
export const GetOrderAction = (orderId: string) => ({
type: OrdersActions.GET_ORDER_ACTION,
id: orderId,
// has nothing to do with order
overlay: true,
});
• Not type-safe
this.actions$.ofType(OrdersActions.DONE_GET_ORDER)
// we want this code to fail
.map(response => response.response)

4. @ngrx/store way
• @ngrx/store is the library that provides Redux
bindings for Angular
• Their approach tries to address these problems,
but in a clumsy way.

5. @ngrx/store actions

6. Solution: TypeScript FSA
• Small TypeScript library that solves the above
problems:
https://github.com/aikoven/typescript-fsa
• Complies with the (de-facto standard) Flux
Standard Actions (AirBnB, Slack, BitBucket)
https://github.com/acdlite/flux-standard-action
• There is also a companion library that integrates
actions with type-safe reducers:
https://github.com/dphilipson/typescript-fsa-reducers

7. Async actions
• Instead of creating three action creators, we only
create one:
export const GetOrderAction =
actionCreator.async<string, IOrder, Error>
(OrdersActions.GET_ORDER, {overlay: true});
• Now the actions can be created like this:
GetOrderAction.started(1)
GetOrderAction.done({params: null, result})
GetOrderAction.failed({params: null, error})

8. Actions parameters
• Flux standard actions:
interface Action<P> {
type: string;
payload: P;
error?: boolean;
meta?: Object;
}
• TypeScript FSA:
GetOrderAction.started(1, {overlay: true})
• Async failure action has error: true:
this.actions$.filter(GetOrderAction.failed.match)
// maps to true
.map(action => action.error)

9. Type-safe actions
• export const GetOrderAction =
actionCreator.async<string, IOrder, Error>
(OrdersActions.GET_ORDER, {overlay: true});
• Type signature: <started, done, failed>
• This way our code is safer. For example, compiler will hint at the type errors in
following cases:
// expects a string
GetOrderAction.started({id: 1})
this.actions$.ofType(OrdersActions.DONE_GET_ORDER)
// expects IOrder which doesn't have response property
.map(response => response.response)
• These errors become apparent during compilation thanks to type inference
(ability of the compiler to deduce the type of the argument)

10. Effects example
• export const GetOrderAction =
actionCreator.async<string, IOrder, Error>(OrdersActions.GET_ORDER, {overlay: true});
• @Effect() getOrder$ =
this.actions$.filter(GetOrderAction.started.match)
.switchMap(({payload: orderId}) =>
Observable
.fromPromise(this.apiService.orderApi.getOrder(orderId))
.map((result: any) => GetOrderAction.done({params: null, result}))
.catch(error => Observable.of(GetOrderAction.failed({params: null, error}))),
);
@Effect() doneGetOrder$ =
this.actions$.filter(GetOrderAction.done.match)
.map(({payload: {result}}) => SetOrderAction(result));

11. Best practices
• Actions should end with "Action", as in
GetOrderAction
• Async actions (that involve an API request) should
be created using AsyncActionCreator.

12. Pro-tip: don't turn off Redux
DevTools off