Add separate project for async-thunk implementation

[ttamminen]

@aikoven provided a solution for redux-thunk integration and I think this should be a separate package with the util + documentation. I use redux-thunk, so I can contribute to the usage documentation.

I have modified it slightly for readability and added TError generic.

import { AsyncActionCreators } from 'typescript-fsa'

// https://github.com/aikoven/typescript-fsa/issues/5#issuecomment-255347353
function wrapAsyncWorker<TParameters, TSuccess, TError>(
  asyncAction: AsyncActionCreators<TParameters, TSuccess, TError>,
  worker: (params: TParameters) => Promise<TSuccess>,
) {
  return function wrappedWorker(dispatch, params: TParameters): Promise<TSuccess> {
    dispatch(asyncAction.started(params));
    return worker(params).then(result => {
      dispatch(asyncAction.done({ params, result }));
      return result;
    }, (error: TError) => {
      dispatch(asyncAction.failed({ params, error }));
      throw error;
    });
  }
}

export default wrapAsyncWorker

[xdave]

I was thinking about making wrapAsyncWorker act like how I declare thunks already, so I wrote this:

import { Dispatch } from "redux";
import { ThunkAction } from "redux-thunk";
import { AsyncActionCreators } from "typescript-fsa/lib";

type Thunk<R> = ThunkAction<Promise<R>, any, any>;

type AsyncWorker<R, P, S = any, T = any> =
    (params: P, dispatch: Dispatch<S>, getState: () => S, extra: T) => Promise<R>;

export const createThunk = <P, R, E>(
    actions: AsyncActionCreators<P, R, E>,
    worker: AsyncWorker<R, P>
) => (params: P): Thunk<R> => async (dispatch, getState, extra) => {
    dispatch(actions.started(params));
    try {
        const result = await worker(params, dispatch, getState, extra);
        dispatch(actions.done({ params, result }));
        return result;
    } catch (error) {
        dispatch(actions.failed({ params, error }));
        throw error;
    }
};

You use it like this (for example):

import actionCreatorFactory from 'typescript-fsa';
import { createThunk } from "../util/async";
import { App } from "../types";

const create = actionCreatorFactory('posts');

export const getPostActions = create.async<
    App.Post.GetParams,
    App.Post.Result,
    App.Post.Failure>('GET');

export const getPost = createThunk(getPostActions, async params => {
    const url = `https://jsonplaceholder.typicode.com/posts/${params.id}`;
    const response = await fetch(url);
    if (response.status >= 400) {
        throw new Error(`Server Error: ${response.status}`);
    }
    return response.json() as Promise<App.Post.Result>;
});

And then somewhere later:

import { getPost } from '../actions/posts';

...

    dispatch(getPost({ id: 1 }));

....

[xdave]

Even better, I got it to infer the type of dispatch and getState in the worker function -- by allowing you to pass in the state type as the first type argument of the action creators factory:

import { Dispatch } from "redux";
import { ThunkAction } from "redux-thunk";
import { ThunkActionCreators } from "typescript-fsa";

declare module 'typescript-fsa' {
    export interface ThunkActionCreators<State, P, S, E>
        extends AsyncActionCreators<P, S, E> {
    }

    export interface ActionCreatorFactory {
        async<S, P, R, E>(prefix?: string, commonMeta?: Meta)
            : ThunkActionCreators<S, P, R, E>;
    }
}

export type Thunk<R, S> = ThunkAction<Promise<R>, S, any>;

export type AsyncWorker<R, P, S, T = any> =
    (params: P, dispatch: Dispatch<S>, getState: () => S, extra: T)
        => Promise<R>;

export default <S, P, R, E>(
    actions: ThunkActionCreators<S, P, R, E>,
    worker: AsyncWorker<R, P, S>
) => (params: P): Thunk<R, S> => async (dispatch, getState, extra) => {
    dispatch(actions.started(params));
    try {
        const result = await worker(params, dispatch, getState, extra);
        dispatch(actions.done({ params, result }));
        return result;
    } catch (error) {
        dispatch(actions.failed({ params, error }));
        throw error;
    }
};

export const getPostActions = create.async<
    App.State,
    App.Post.GetParams,
    App.Post.Result,
    App.Post.Failure>('GET');

export const getPost = createThunk(getPostActions, async (params, dispatch, getState) => {
    const url = `https://jsonplaceholder.typicode.com/posts/${params.id}`;
    const response = await fetch(url);
    if (response.status >= 400) {
        throw new Error(`Server Error: ${response.status}`);
    }
    return response.json() as Promise<App.Post.Result>;
});

For example, the type of getState above is inferred as () => App.State

[xdave]

Typescript is magic.

[ttamminen]

@xdave I think all that you have written is marvelous!

I am familiar with C#'s async await, but I need to read more about ES standard's implementation as I guess it abstracts promises away.

Anyways, good stuff!

[xdave]

It's only a syntactic element. It uses promises under the hood for async, and generators for await. To make it work in Typescript, you can get typescript 2.2+ (it will down compile it even to ES3 if you want), and it will insert the __generator helper.

You can also install tslib and set importHelpers in tsconfig to reduce the amount of times the helpers get inserted and the compile size.

[xdave]

https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9

[ttamminen]

@xdave @aikoven Is there any chance to get this into a separate package? I think people are copy-pasting these snippets to their projects which probably isn't a good thing to do on a long run.

[xdave]

Lol sure, I'll take a look at it tonight.

[xdave]

@ttamminen @aikoven https://github.com/xdave/typescript-fsa-redux-thunk

npm install --save typescript-fsa-redux-thunk
or
yarn add typescript-fsa-redux-thunk

[ttamminen]

@xdave Excellent, good work! I tested the library and it works smoothly. The only issue I found is with the module augmentations, but it is probably something I am doing wrong. xdave/typescript-fsa-redux-thunk#1

I think this issue is now completed!