https://github.com/youfoundron/react-redux-connect-helpers
Helpful set of functions for connecting redux state to react components.
https://github.com/youfoundron/react-redux-connect-helpers
react redux
Last synced: 5 months ago
JSON representation
Helpful set of functions for connecting redux state to react components.
- Host: GitHub
- URL: https://github.com/youfoundron/react-redux-connect-helpers
- Owner: youfoundron
- Created: 2017-01-14T19:01:59.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-18T00:56:24.000Z (over 9 years ago)
- Last Synced: 2025-04-12T18:04:43.475Z (over 1 year ago)
- Topics: react, redux
- Language: JavaScript
- Size: 86.9 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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... 😴
[](https://travis-ci.org/rongierlach/react-redux-connect-helpers) [](https://david-dm.org/rongierlach/react-redux-connect-helpers) [](https://david-dm.org/rongierlach/react-redux-connect-helpers#info=devDependencies) [](https://standardjs.com)
## Installation
`$ npm install react-redux-connect-helpers`
## Usage
```javascript
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 =>
{props.text}
// 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)> | [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String))**
- `propName` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)**
- `transformValue` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)**
**Examples**
```javascript
const BandContainer = compose(
connectStateValue('name'),
connectStateValue(['musicians'], 'members'),
connectStateValue(
['discography', 'albumsByYear'],
'firstThreeAlbums',
(albumsByYear, state) => albumsByYear.slice(0, 3)
)
)(BandComponent)
```
Returns **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Connected component class
### connectValue
Returns a function that connects a value to a React component as a prop
**Parameters**
- `value` **any**
- `propName` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)**
**Examples**
```javascript
const TitleContainer = compose(
connectValue('purple', 'color'),
connectValue('You\'re Living All Over Me', 'title')
)(TitleComponent)
```
Returns **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)**
**Examples**
```javascript
const actionCreators = { purchaseAlbum, ... }
const connectAction = createActionConnector(actionCreators)
const PurchaseButton = compose(
connectAction('purchaseAlbum', 'onClick')
)(ButtonComponent)
```
Returns **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Helper to connect an action