title: React - Multiple components with the same actions & reducers
body: <p>I created a component that lets you add/remove additional dropdowns onClick of a button. I use Redux to keep the state of the added fields and value selected.</p>
  
  <p>It works fine but if I add the component twice on the page (using the same actions and reducers), both dropdowns will update at the same time. </p>
  
  <p>How could I make them work independently?</p>
  
  <p><strong>index.jsx</strong></p>
  
  <pre><code>import React from 'react'
  import { connect } from 'react-redux'
  import DropDownField from './form/drop-down-field'
  import uuidV4 from 'uuid-v4'
  import { saveSelect, removeSelect, saveSelectValue } from './actions.js'
  
  
  class Component extends React.Component {
    constructor(props) {
      super(props);
    }
  
    saveData(e) {
      let data = {}
      data[e.target.name] = e.target.value
  
      this.context.store.dispatch(
        addData(data)
      )
    }
  
    addInput = (e) =&gt; {
      e.preventDefault()
      this.props.saveSelect({id:uuidV4()})
    }
  
    removeInput = (index, e) =&gt; {
      e.preventDefault()
      this.props.removeSelect(index)
    }
  
    saveSelectValue = (e, id) =&gt; {
      let data = {}
      data.id = id
      data.value = e.target.value
  
      this.props.saveSelectValue(data)
    }
  
    renderNationalitiesSelect = (selection, index) =&gt; {
      const selectedValue = selection.value || ''
      const id = selection.id
  
      return(
        &lt;div&gt;
          &lt;DropDownField
            key={id}
            name={'field-'+ id}
            value={selectedValue}
            onChange = {(e) =&gt; { this.saveSelectValue(e, id) }}
            required
            options={{
              0: 'Please Select',
              1: 'British',
              2: 'French',
              3: 'American',
              4: 'Australian'
          }}  /&gt;
  
          &lt;a href="#" onClick={ (e) =&gt; {this.removeInput(index, e) }}&gt;Remove&lt;/a&gt;
        &lt;/div&gt;
      )
    }
  
    renderCountriesSelect = (selection, index) =&gt; {
      const selectedValue = selection.value || ''
      const id = selection.id
  
      return(
        &lt;div&gt;
          &lt;DropDownField
            key={id}
            name={'field-'+ id}
            value={selectedValue}
            onChange = {(e) =&gt; { this.saveSelectValue(e, id) }}
            required
            options={{
              0: 'Please Select',
              1: 'United Kingdom',
              2: 'France',
              3: 'United States',
              4: 'Australia'
          }}  /&gt;
  
          &lt;a href="#" onClick={ (e) =&gt; {this.removeInput(index, e) }}&gt;Remove&lt;/a&gt;
        &lt;/div&gt;
      )
    }
  
    render(){
      const selections = this.props.selections || []
  
      let {
        Nationality,
        CountryOfResidence
      } = this.props.store
  
      return (
        &lt;DropDownField name="Nationality" value={Nationality} options={{
          0: 'Please Select', 1: 'British', 2: 'French', 3: 'American', 4: 'Australian'
        }} onChange={this.saveData.bind(this)} /&gt;
  
        &lt;div&gt;
          &lt;div&gt;
            {selections.map(this.renderNationalitiesSelect)}
          &lt;/div&gt;
  
          {this.props.selections.length &lt; 4 &amp;&amp;
            &lt;div&gt;
              &lt;a href="#" onClick={this.addInput}&gt;Add&lt;/a&gt;
            &lt;/div&gt;
          }
        &lt;/div&gt;
  
  
        &lt;DropDownField name="CountryOfResidence" value={CountryOfResidence} options={{
          0: 'Please Select', 1: 'United Kingdom', 2: 'France', 3: 'United States', 4: 'Australia'
        }} onChange={this.saveData.bind(this)} /&gt;
  
        &lt;div&gt;
          &lt;div&gt;
            {selections.map(this.renderCountriesSelect)}
          &lt;/div&gt;
  
          {this.props.selections.length &lt; 4 &amp;&amp;
            &lt;div&gt;
              &lt;a href="#" onClick={this.addInput}&gt;Add&lt;/a&gt;
            &lt;/div&gt;
          }
        &lt;/div&gt;
  
      )
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      store: state.AddDropdown,
      selections: state.AddDropdown.selections,
    }
  }
  
  const AddDropdown = connect(mapStateToProps, {saveSelect, removeSelect, saveSelectValue})(Component)
  
  export default AddDropdown
  </code></pre>
  
  <p><strong>action.js</strong></p>
  
  <pre><code>export const ADD_DATA = 'ADD_DATA'
  export const ADD_SELECT = 'ADD_SELECT'
  export const REMOVE_SELECT = 'REMOVE_SELECT'
  export const SAVE_SELECT_OPTION = 'SAVE_SELECT_OPTION'
  
  export function addData(data) {
    return { type: ADD_DATA, data }
  }
  
  export function saveSelect(data) {
    return { type: ADD_SELECT, data }
  }
  
  export function removeSelect(data) {
    return { type: REMOVE_SELECT, data }
  }
  
  export function saveSelectValue(data) {
    return { type: SAVE_SELECT_OPTION, data }
  }
  </code></pre>
  
  <p><strong>reducer.js</strong></p>
  
  <pre><code>import ObjectAssign from 'object.assign'
  import { combineReducers } from 'redux'
  import { ADD_DATA, ADD_SELECT, REMOVE_SELECT, SAVE_SELECT_OPTION } from './actions'
  
  function AddDropdown(state = { selections: []}, action = {}){
    switch (action.type){
      case ADD_DATA:
        return ObjectAssign({}, state, action.data)
      case ADD_SELECT:
        return {
          ...state,
          selections: [].concat(state.selections, action.data),
        }
      case REMOVE_SELECT:
        return {
          ...state,
          selections: state.selections.filter((selection, index) =&gt; (index !== action.data)),
        }
      case SAVE_SELECT_OPTION:
        return {
          ...state,
          selections: state.selections.map((selection) =&gt; selection.id === action.data.id ? action.data : selection)
        }
      default:
        return state
    }
  }
  
  
  const FormApp = combineReducers({
    AddDropdown
  })
  
  export default FormApp
  </code></pre>