@zentus/re-connect v0.1.4

re-connect

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 reconnect from 're-connect'

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 reconnect(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

If we'd like, we could also scope the connected props.

Our Redux state:

{
  food: { taste: 'good' }
}

import reconnect from 're-connect'

const usedState = {
  food: true
}

const FoodGuy = props => {
	return (
		<div>
			{`This food tastes ${props.global.food.taste}`}
		</div>
	)
}

export default reconnect(FoodGuy, usedState, { scope: 'global' })

License

This project is licensed under the MIT License