React-Redux Decorators
Did you know that you can use the connect
method in react-redux
as a decorator? Using a decorator allows us to go from code like this:
To code like this:
This approach gives us the advantage of immediately seeing that we are exporting a connected component when we look at the component definition, and lets us export the component on the line where we declare it. We can take this idea one step further if we define our own mapStateToProps
and mapDispatchToProps
decorators.
Using these decorators over the non-decorator method affords us an additional advantage. We do not have to pass in () => ({})
as the first argument to connect
when we only want to use mapDispatchToProps
, and we do not have to pass in
We can also chain our decorators, so our initial example would become:
Easier to read, no redundant empty functions, and less lines of code. Getting this to work in current javascript environments is quite simple. simply install babel-plugin-transform-decorators
and include it in your .babelrc
file. As always i’ve published an npm package if you don’t feel like implementing these decorators yourself.
Happy Decorating!