redux-smooth-bind-actioncreators

Reduce the boilerplate of "mapStateToProps" and "mapDispatchToProps" !
This implentation of connect / bindActionCreator is a quality of life change for my particular usage. I have more than 1 "store" and each of my pages needs to bind its own actions/states while also binding dispatch. I don't want to include the functions at the bottom of "n" number of pages setting up these connects/bindToActionCreators. So, just include this package and we should be good to go. You now have "actions", and "state", all wrapped up nicely for you and no need to have 2 small functions and includes (at top) on each page.

Please NOTE: This code assumes you have multiple reducers AND you either want to include all of these stores, or just a particular one(or many).
So, in short - the goals is to reduce the boilerplate of "mapStateToProps" and "mapDispatchToProps". If you have
these two functions for a file, or two. No worries. But, what if you have 3+ files, that all use this same boilerplate code?
Thus, include this npm module -- and boom. One line at the bottom, and you are good to go!

Simple Directions

So, lets make things simple.

Include the import at top of file
Write your React class how you wish
Now, when you export, follow this convention.
We are assuming ES6

Example In Practice


import * as Actions             from 'actions/myactions'
import bindMapComponent         from 'redux-map-bind-actioncreators'

class MyReactClass extends Component {
  // all your class logic here
}
export default bindMapComponent(MyReactClass)(Actions)

So, in your react class, you can now do 'actions.myFuncName()'. The dispatch is bound to it.

I want my whole state tree on my props. Do nothing, this handles it for you.

I want only 1 (or more) stores on my props. For instance, my "store/state tree" has

the following reducers. Shoes, Prices, Colors, Sizes. BUT, I only want my component to care about the state as it pertains to Shoes & Colors (remember, Shoes is its own reducer )



export default bindMapComponent(MyReactClass)(Actions, "Shoes", "Colors")

// you get:
this.props.state = {
    Shoes: {},
    Colors: {}
}

I want a custom "actions" name

Now, you see "actions", that is the default return on props. The example above, I assume you destructed it, ala:
const {actions} = this.props
 
But if you want to denote the 'actions' another way, just do this:
export default bindMapComponent(MyReactClass, "MYACTIONS")(Actions)
 
In Short:

default is "actions", you don't have to pass it.
You want a custom name, pass it in with your class name, as the second arg. now we have: MYACTIONS.myFuncName()
note: in the examples I use "actions.myFuncName()" or "MYACTIONS.myFuncName()". We assume destructring off of the props.

dsacramone / redux-smooth-bind-actioncreators