Add separate project for async-thunk implementation

@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]

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

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