0.2.1 • Published 6 years ago
kontakt v0.2.1
kontakt
This is a wrapper around react-redux
's connect
function. It requires you to have react-redux
installed in your package.
Usage
Let's say our Redux state looks like this:
{
sky: 'blue',
tree: {
branch: {
leaf: 'green'
}
}
}
Then we can do:
import kontakt from 'kontakt'
const usedState = {
sky: true,
treeBranchLeaf: 'tree.branch.leaf'
}
const MyComponent = props => {
return (
<div>
{`The sky is ${props.sky} and the leaf is ${props.treeBranchLeaf}`}
</div>
)
}
export default kontakt(MyComponent, usedState)
usedState
is an object used for mapping global state to component props.
The key is the component prop name, and the value is the property on the state
object that the component prop will be mapped to.
The value can be a string
containing a dot notated property.
The value can can also be a boolean
. If true
, the state
property will be mapped to the component using the same name (see state.sky
--> props.sky
). If false
, it will be ignored.
Options
Name | Default | Description |
---|---|---|
scope | false | Uses a scope for props bound to the Redux state |
If we'd like, we could also scope the connected props.
Our Redux state:
{
food: { taste: 'good' }
}
import kontakt from 'kontakt'
const usedState = {
food: true
}
const FoodGuy = props => {
return (
<div>
{`This food tastes ${props.global.food.taste}`}
</div>
)
}
export default kontakt(FoodGuy, usedState, { scope: 'global' })
License
This project is licensed under the MIT License
0.2.1
6 years ago