DEV Community

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 received,...
Collapse
 
kaodev profile image
Kalle Ott

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

Collapse
 
resir014 profile image
Resi Respati

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.

Collapse
 
0xjj profile image
JJ • Edited

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?

Collapse
 
resir014 profile image
Resi Respati

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.

Collapse
 
buinauskas profile image
Evaldas Buinauskas • Edited

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 };?

Collapse
 
resir014 profile image
Resi Respati

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

Collapse
 
cladikzone profile image
cladikzone

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 ?

Collapse
 
wintermute42 profile image
wintermute42

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?

Collapse
 
raminahmadi1986 profile image
Ramin Ahmadi • Edited

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

Collapse
 
resir014 profile image
Resi Respati

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. :-)

Collapse
 
resir014 profile image
Resi Respati

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!