Shorthand for react-redux’s mapStateToProps. Need some props? Just select 'em!
const mapStateToProps = (state) => ({
foober: fooberSelector(state),
goober: gooberSelector(state),
anotherProp: anotherPropSelector(state),
youGetTheIdea: youGetTheIdeaSelector(state),
});
const mapStateToProps = selectem({
fooberSelector,
gooberSelector,
anotherPropSelector,
youGetTheIdeaSelector,
});
- Avoid typos
- Write less characters
- DRY up your code
- Why not?
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. 👍
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.
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!
MIT