Add Redux-Saga examples to the async-flow section

[rmilejcz]

Redux-saga is a fairly popular library, and getting it to play nicely with this library isn't immediately clear or intuitive. I propose a new set of code examples to helpers who would like to use typescript with redux-saga.

I figured I would check if this is something that might be desired, so if the maintainers here agree I would be more than happy to create these examples as I have already done much of the work in a project I'm currently working on.

[piotrwitek]

Duplicated piotrwitek/typesafe-actions#89

[piotrwitek]

@rmilejcz Yes, I'm considering to add it.
Is the linked issue similar or you wanted to add something more?

Here is the PR: piotrwitek/typesafe-actions#89

[rmilejcz]

I take a slightly different approach, since my setup is relying heavily on the ActionType and getType utilities as I do not explicitly define my action types. Basically I use action type to define actions that are used to trigger async side effects as their own type:

const FetchRequestAction = ActionType<typeof actions.fetchRequest>
const ReducerActions = ActionType<typeof actions>

Then you can define your return signature with:

type FetchRequestIterator = IterableIterator<CallEffect | PutEffect<ReducerActions>>

Which I abstract out to:

type SagaHandler<T> = IterableIterator<CallEffect | PutEffect<T>>

where T is some ActionType<>

and it all combines nicely:

function* handleFetchRequest({payload}: FetchRequestAction): FetchRequestIterator {
  try {
    const result = yield call(fetchRequest, payload) // <-- no errors
    if(result){
      yield put(fetchRequestSuccess, result); // <-- result still inferred as any
    } else {
      throw new Error('An unknown error occurred');
    }
  } catch(err) {
    yield put(fetchRequestFailure, err);
  }
}

so the payload can be handled with typesafety. There are two issues with this:

1. The result of any yield statement is inferred as any; this is a problem with TypeScript and is discussed here

2. The arguments of call() are not validated against one another, so if I replace payload in the above example with, say true or some other inappropriate value there is no error.

Obviously having type safety for the action creators and their arguments would be desired, but the above example does provide better typesafety than nothing. If you need help or have any questions I'm happy to help, otherwise if you decide to go with that other PR that's fine too

[piotrwitek]

TBH I don't know what are benefits of your abstracted SagaHandler<T> because you only showing me a segment from all the different layers. I would need a codesandbox with all the layers involved to be able to judge this solution or compare it to the other one. Without context they look pretty much the same with only notable difference that you have return type but I dunno what it gives.

[piotrwitek]

Added ReduxSaga example in typesafe-actions tutorial section: https://github.com/piotrwitek/typesafe-actions#starring-redux-saga-sagas