Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1.1k
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 withouttypsafe-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 dispatch 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-observablebefore; what does this do? */import{createBrowserHistory}from'history';import{routerMiddlewareascreateRouterMiddleware}from'connected-react-router';/* Okay, but I don't need a router to create a basic redux template, and there's nothing here thatcouldn'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)*/importrootReducerfrom'./root-reducer';importrootEpicfrom'./root-epic';importservicesfrom'../services';// browser historyexportconsthistory=createBrowserHistory();exportconstepicMiddleware=createEpicMiddleware<RootAction,RootAction,RootState,Services>({dependencies:services,});constrouterMiddleware=createRouterMiddleware(history);// configure middlewaresconstmiddlewares=[epicMiddleware,routerMiddleware];// compose enhancersconstenhancer=composeEnhancers(applyMiddleware(...middlewares));// rehydrate state on app startconstinitialState={};// create storeconststore=createStore(rootReducer(history),initialState,enhancer);epicMiddleware.run(rootEpic);// export store singleton instanceexportdefaultstore;
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';importthunkfrom'redux-thunk';importcreateRootReducerfrom'./root-reducer';// rehydrate state on app startconstinitialState={};// create storeconststore=createStore(createRootReducer(),initialState,applyMiddleware(thunk));// export store singleton instanceexportdefaultstore;
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 anAnyAction
constraint ondispatch
:Store<RootState, AnyAction>
. I can't figure out how to get a store instance withdispatch
constrained toRootAction
. Thanks again for all the great work you've done.