Possible to Integrate with redux form?

[wayne-huang-14]

I'm trying to integrate it when redux-form and have redux-form manage the data. I'm not sure how to work with the handleAddition prop to work with redux-form.

Is there an example if this is possible?

[i-like-robots]

I haven't heard of redux-form but here is an example using the component with Redux which I've done a few times:

// actions/tags.js
const add = (payload) => ({
  type: 'TAGS_ADD',
  payload
})

const remove = (payload) => ({
  type: 'TAGS_REMOVE',
  payload
})

export { add, remove }

// reducers/tags.js
export default (state = [], { type, payload }) => {
  switch (type) {
    case 'TAGS_ADD':
      if (!state.some((item) => item.id === payload.id)) {
        return [].concat(state, payload)
      } else {
        return state
      }

    case 'TAGS_REMOVE':
      return state.filter((item) => item.id !== payload.id)

    default:
      return state
  }
}

// Component.jsx
import React from 'react'
import { connect } from 'react-redux'
import * as actions from '../actions'
import ReactTags from 'react-tag-autocomplete'

class Component extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      suggestions: []
    }
  }

  render() {
    return (
      <ReactTags
        tags={this.props.tags}
        suggestions={this.state.suggestions}
        handleAddition={(tag) => {
          this.props.onTagAdd(tag)
        }}
        handleDelete={(index) => {
          this.props.onTagRemove(this.props.tags[index])
        }}
      />
    )
  }
}

const mapStateToProps = (state) => ({
  tags: state.tags
})

const mapDispatchToProps = (dispatch) => ({
  onTagAdd(tag) {
    dispatch(actions.tags.add(tag))
  },
  onTagRemove(tag) {
    dispatch(actions.tags.remove(tag))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Component)