A type-safe approach to Redux stores in TypeScript

Resi Respati on February 07, 2018

An update (2018-07-06) This guide is now out of date. I finally took the time to update this guide based on the feedbacks I’ve receive... [Read Full]
markdown guide
 

Hey nice to see a pattern close to my default stack in action. One thing I do different is instead of simple strings for the action types I use string enums, they still provide the benefits of type guards but can be used as constants at all need places

 

Thanks for reminding me about string enums! Will definitely use this and include it in the Redux 4 version of this guide when I finally come around to it.

 

Hi, When I try to access this.props.dispatch method, Editor says ...

Property 'dispatch' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly'

Anyway I am using tslint, which is cause to this issue or ? how can I fix this ?

 

I'm wondering if there isn't any typo in reducers?

Shouldn't the following line return { ...state, connectedUsers: action.users };
be return { ...state, connectedUsers: action.payload.users };?

 

Yes, that should be correct, fixing that now. Thanks for noticing!

 

I am making actions / and store / under the src / directory. This is because in Redux's architecture, actions are outside the store. Does your opinion say that you prioritized the visibility of the code rather than that concept?

 

Yes. When your codebase grows larger, you would inevitably end up scattering code which shares the same context across a great length of the directory tree, which wouldn't be intuitive for newcomers who wanted to take a quick glance.

 

Hi, great guide :-)
I just seem to be missing some detail while struggling to adapt it to a use case of mine. Is there a repository with the complete code?

 

Yeah, I'm looking for the complete code too, could you please provide it somewhere?
and I'm wondering why you suggest ConnectedReduxProps as it makes your code a bit ugly!
so instead of this.props.actionCreator, you have to say this.props.dispatch(call the action creator here).
by the way I got some errors relating that ConnectedReduxProps, for people struggling with this, you should change it to this:

IConnectedReduxProps

 

Also, re: ConnectedReduxProps - I initially decided to do it this way because I didn't know how to properly type mapDispatchToProps calls, but now that I know how, expect for some updates to this pattern in the near future. :-)

 

Hi Ramin and wintermute42,

This was originally made in a coding test for a job application (which I now have!) so the code isn't really public at the moment. When I have the time, I'll try to put what I have back together and put these out into the public for all to see!

code of conduct - report abuse