Description
First of all, thanks for all the hard work you've put into this fantastic guide; if I had tried to migrate my team's codebase to typescript without typsafe-actions it would have turned into a total dumpster fire. Having end-to-end type data for the redux store makes the entire application such a breeze to work on. All that being said, I do have some gripes about the guide:
It seems really odd that there's such a heavy emphasis on redux-observable. It's great that there is some guidance for people that are using it, but in my experience it's a pretty uncommon middleware. It would be much less frustrating for typescript novices if the documentation was limited to redux-thunk, as that's pretty much the bare bones vanilla redux stack. I've been following the guide and I'm stuck on trying to create the store with the dis function constrained to the RootAction type, and my web searches have only turned up a bunch of outdated, garbage blog posts. The lack of typescript examples is of course a huge flaw in the official redux documentation, but since this repository is the de facto guide to type-safe react, it would be much easier to follow if the examples used a very basic store configuration. It would be great to include examples with redux saga and redux observable in the recipes, but it clutters up the basic examples, which should ideally be something that anyone can copy and paste to get a store set up quickly. This applies to the playground as well. As it stands:
import { RootAction, RootState, Services } from 'MyTypes';
/* What is MyTypes and Services? I haven't seen this mentioned anywhere else in the guide up to
this point */
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable'; /* I've never used redux-observable
before; what does this do? */
import { createBrowserHistory } from 'history';
import { routerMiddleware as createRouterMiddleware } from 'connected-react-router';
/* Okay, but I don't need a router to create a basic redux template, and there's nothing here that
couldn't be copy pasted from the redux-router documentation. */
import { composeEnhancers } from './utils';
/* What is utils? It isn't mentioned anywhere else in the guide. (I know it's in the playground source,
but it's confusing if you don't already know where to look)*/
import rootReducer from './root-reducer';
import rootEpic from './root-epic';
import services from '../services';
// browser history
export const history = createBrowserHistory();
export const epicMiddleware = createEpicMiddleware<
RootAction,
RootAction,
RootState,
Services
>({
dependencies: services,
});
const routerMiddleware = createRouterMiddleware(history);
// configure middlewares
const middlewares = [epicMiddleware, routerMiddleware];
// compose enhancers
const enhancer = composeEnhancers(applyMiddleware(...middlewares));
// rehydrate state on app start
const initialState = {};
// create store
const store = createStore(rootReducer(history), initialState, enhancer);
epicMiddleware.run(rootEpic);
// export store singleton instance
export default store;I think it would be better to limit this to what we've already seen in the guide:
import { RootAction, RootState } from 'types'; // How do I supply this to redux?
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createRootReducer from './root-reducer';
// rehydrate state on app start
const initialState = {};
// create store
const store = createStore(createRootReducer(), initialState, applyMiddleware(thunk));
// export store singleton instance
export default store;Now there's nothing in there to distract from the purpose of the guide, which is learning how to use redux without losing type information. Unfortunately, when setting up the store this way, it has an AnyAction constraint on dis: Store<RootState, AnyAction>. I can't figure out how to get a store instance with dis constrained to RootAction. Thanks again for all the great work you've done.