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. 👍

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