React Redux Connect Helpers

A helpful set of functions for connecting redux state to react components.
Compose your connectors at will and build the connected component of your dreams... 😴

Installation

$ npm install react-redux-connect-helpers

Usage

import React from 'react'
import { compose } from 'react-redux'
import {
  connectValue,
  connectStateValue,
  createActionConnector
} from 'react-redux-connect-helpers'

// 1. Given a component we wish to connect to state
const ButtonWithText = props =>
  <button
    className={props.active ? 'active' : ''}
    onClick={props.onClick}
  >
    {props.text}
  </button>

// 2. And action creators to be bound to dispatch (optional)
const actionCreators = {
  toggleMenuActiveState: () => ({
    type: 'TOGGLE_MENU_ACTIVE_STATE',
    payload: null
  })
}

// 3. We can connect property 'text' as value 'Menu'
const textProp = connectValue('Menu', 'text')

// 4. We can connect property 'active' as value at state.menu.active
const activeProp = connectStateValue(['menu', 'active'], 'active')

// 5. We can create an action connecting helper for our actionCreators
const connectAction = createActionConnector(actionCreators)

// 6. And then connect property 'onClick' as a bound action creator toggleMenuActiveState
const onClickProp = connectAction('toggleMenuActiveState', 'onClick')

// 7. Finally, we can connect our component with all the desired props
const ToggleMenuButton = compose(
  textProp
  activeProp,
  onClickProp
)(ButtonWithText)

export default ToggleMenuButton

Immutable

If your redux store uses Immutable.js, import with react-redux-connect-helpers/immutable

API Reference

connectStateValue

Returns a function that connects a value in state to a React component as a prop

Parameters

• pathArray (Array<string> | string)
• propName string
• transformValue function

Examples

const BandContainer = compose(
  connectStateValue('name'),
  connectStateValue(['musicians'], 'members'),
  connectStateValue(
    ['discography', 'albumsByYear'],
    'firstThreeAlbums',
    (albumsByYear, state) => albumsByYear.slice(0, 3)
  )
)(BandComponent)

Returns function Connected component class

connectValue

Returns a function that connects a value to a React component as a prop

Parameters

• value any
• propName string

Examples

const TitleContainer = compose(
  connectValue('purple', 'color'),
  connectValue('You\'re Living All Over Me', 'title')
)(TitleComponent)

Returns function Connected component class

createActionConnector

A higher order function that returns a function to connect bound actions to React components as props

Parameters

• actionCreators object

Examples

const actionCreators = { purchaseAlbum, ... }
const connectAction = createActionConnector(actionCreators)
const PurchaseButton = compose(
  connectAction('purchaseAlbum', 'onClick')
)(ButtonComponent)

Returns function Helper to connect an action