https://github.com/sibnerian/selectem
Shorthand for react-redux’s mapStateToProps. Need some props? Just select 'em!
https://github.com/sibnerian/selectem
react react-redux redux reselect selector
Last synced: 2 months ago
JSON representation
Shorthand for react-redux’s mapStateToProps. Need some props? Just select 'em!
- Host: GitHub
- URL: https://github.com/sibnerian/selectem
- Owner: sibnerian
- License: mit
- Created: 2017-07-10T00:19:12.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-10T07:32:32.000Z (almost 9 years ago)
- Last Synced: 2025-10-23T04:05:58.066Z (8 months ago)
- Topics: react, react-redux, redux, reselect, selector
- Language: JavaScript
- Homepage:
- Size: 8.79 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# selectem
[](https://travis-ci.org/sibnerian/selectem) [](https://coveralls.io/github/sibnerian/selectem?branch=master) [](https://badge.fury.io/js/selectem)
Shorthand for react-redux’s mapStateToProps. Need some props? Just select 'em!
## Before
```jsx
const mapStateToProps = (state) => ({
foober: fooberSelector(state),
goober: gooberSelector(state),
anotherProp: anotherPropSelector(state),
youGetTheIdea: youGetTheIdeaSelector(state),
});
```
## After
```jsx
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]](https://github.com/reactjs/react-redux/blob/master/docs/api.md#the-arity-of-mapstatetoprops-and-mapdispatchtoprops-determines-whether-they-receive-ownprops). We’ll do the [same arity check as `react-redux`](https://github.com/reactjs/react-redux/blob/master/src/connect/wrapMapToProps.js#L20) 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:
```jsx
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