declarative-react-redux
v0.2.0
Published
Allows you to map state and actions to props declaratively
Downloads
7
Maintainers
Readme
react-redux is a great module that allows us to decouple our components from our state, so we can focus only on the view. It does this by providing a connector that maps state and actions to props, effectively allowing us to make all our components dumb again (which is a good thing).
To use it you create a mapStateToProps
function and a mapDispatchToProps
function, which return
state properties and actions respectively.
The problem is you have to do this for every component which requires something from the state or
performs an action, leading to a lot of repetition and boilerplate code.
simple-react-redux allows you to leverage the power of react-redux
declaratively:
instead of creating the required functions, you add props to your element to tell it
what to get from the state and which actions to use.
Let's say you have a person component, which needs name
and age
from the state and dispatches
the updateName
action. With react-redux
the code would look something like this:
import {connect} from 'react-redux';
import {updateName} from './actions';
var Person = React.createClass({
...
});
function mapStateToProps(state) {
return {
name: state.name,
age: state.age
};
}
function mapDispatchToProps(dispatch) {
return {
updateName: function (newName) {
return dispatch(updateName(newName));
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Person);
Using simple-react-redux
you can achieve the same functionality with just a few lines of code:
import simpleConnect from 'simple-react-redux';
import {updateName} from './actions';
var Person = React.createClass({
// ...
});
export default simpleConnect(Person);
And then when you use it:
<Person getFromState={["name", "age"]} getFromActions={{updateName: updateName}} />
And that's it!