typescript-fsa icon indicating copy to clipboard operation
typescript-fsa copied to clipboard

Might be useful to have examples folder

Open quantuminformation opened this issue 6 years ago • 1 comments

It would be nice to have an examples folder with a real redux app with all the various ways this can be used and best practices, Esp async stuff.

My use case is that I'm trying to understand a codebase I've inherited and am not sure if this is a standard practice or not:

import { Site } from '../../model/Site';
import { loadSites as eventApiLoadSites } from '../../rest-api/Event-api';
import { Dispatch } from 'redux';
import { actionCreatorFactory, AnyAction } from 'typescript-fsa';
import wrapAsyncWorker from './wrapAsyncWorker';

const actionCreator = actionCreatorFactory();

export const LoadSites = actionCreator.async<null, Site[]>('LoadSites');

const loadSitesWorker =
  wrapAsyncWorker(LoadSites, (): Promise<Site[]> => eventApiLoadSites());

export const loadSites = () => {
  return (dispatch: Dispatch<AnyAction>) => loadSitesWorker(dispatch, null);
};

loadSites() is passed to an argument to store.dispatch and is giving me typing errors:

TypeScript error: Argument of type '(dispatch: Dispatch<AnyAction>) => Promise<Site[]>' is not assignable to parameter of type 'AnyAction'.

quantuminformation avatar Mar 13 '19 09:03 quantuminformation

There are some examples in the readme. I'd happily accept a PR if you have something to add 🙂.

As for async stuff: usually you would first pick a Redux middleware for it, like redux-saga, or redux-thunk, or redux-promise. Then either dispatch async actions manually before and after an async process, or introduce a helper that wraps these processes. There are already packages that integrate typescript-fsa with redux-saga or redux-thunk.

From the code you posted I'd guess that it's using redux-promise or similar. Make sure that the middleware is applied to the store. It should augment the type of store.dispatch.

aikoven avatar Mar 19 '19 11:03 aikoven