react-redux-clean-connect

A React Redux helper for less React connect boilerplate

Installation

$ npm install --save react-redux-clean-connect

Usage

// Connecting can look like this: ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

import * as React from 'react'
import { cleanConnect } from 'react-redux-clean-connect'
import { getByUUID, updateSearchCriteria } from '../state/actions/userActions'

const mapStateAndDispatchToProps = (propsFromState, ownProps) => {
  const partialState = propsFromState.partialState

  return {
    // state props
    errorMessage: partialState.error.message,
    username: partialState.searchCriteria.username,
    usersObj: partialState.usersObj,

    // dispatch props
    getByUUID: () => getByUUID(partialState.searchCriteria),
    updateSearchCriteria,
  }
}

export default cleanConnect(mapStateAndDispatchToProps)(
    class UserList extends React.Component {


// Instead of looking like this: ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

import * as React from 'react'
import { connect } from 'react-redux'
import { getByUUID, updateSearchCriteria } from '../state/actions/userActions'

const mapStateToProps = (store, ownProps) => {
  return {
    ...ownProps,
    errorMessage: partialState.error.message,
    username: partialState.searchCriteria.username,
    usersObj: partialState.usersObj,
  }
}

const mapDispatchToProps = {
  getByUUID,
  updateSearchCriteria
}

const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
  const partialState = propsFromState.partialState

  return {
    ...ownProps,
    ...propsFromState
    ...propsFromDispatch
    getByUUID: () => propsFromDispatch.getByUUID(partialState.searchCriteria),
  }
}

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(
  class Loyalty extends React.Component<any, any> {

License

MIT © PC Thomatos