selectem
v1.0.0
Published
Shorthand for react-redux’s mapStateToProps. Need some props? Just select 'em!
Downloads
2
Maintainers
Readme
selectem
Shorthand for react-redux’s mapStateToProps. Need some props? Just select 'em!
Before
const mapStateToProps = (state) => ({
foober: fooberSelector(state),
goober: gooberSelector(state),
anotherProp: anotherPropSelector(state),
youGetTheIdea: youGetTheIdeaSelector(state),
});
After
const mapStateToProps = selectem({
fooberSelector,
gooberSelector,
anotherPropSelector,
youGetTheIdeaSelector,
});
Why tho?
- Avoid typos
- Write less characters
- DRY up your code
- Why not?
Advanced
What if my selectors need ownProps
?
Normally react-redux
checks the number of arguments of mapStateToProps
to determine whether or not to pass in an ownProps
parameter [1]. We’ll do the same arity check as react-redux
and pass ownProps
to each selector that needs it. :+1:
I want to give one of my props a custom name! Can it be done?
Yes, only props that end in "Selector" will be renamed! If you give a prop a custom name it will just get passed through automatically.
I have a complicated mapStateToProps
function but I still hate typing.
It happens - particularly if you need per-instance memoization. selectem
is pretty simple, so you can mix it in with standard mapStateToProps
syntax without too much trouble:
const mapStateToProps = () => {
// some complicated memoization stuff
return (state, ownProps) => ({
someProp: myPerInstanceMemoizedSelector(state, ownProps),
...selectem({
fooSelector,
barSelector,
bazSelector,
})(state, ownProps),
});
};
This basically boils down to calling the selectem
function using (state, ownProps)
as arguments.
I'm not sure if this is actually nicer than just typing it out, but it works!
License
MIT