typescript-fsa
typescript-fsa copied to clipboard
Might be useful to have examples folder
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'.
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.