React - Multiple components with the same actions & reducers

Question

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.

It works f

Answer 1

I suggest isolating each set of dropdowns as a seperate component, then working on isolating each one's redux state. My library, redux-subspace was designed for this purpose.

index.jsx

import React from 'react'
import { connect } from 'react-redux'
import { SubspaceProvider } from 'redux-subspace'
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) => {
    e.preventDefault()
    this.props.saveSelect({id:uuidV4()})
  }

  removeInput = (index, e) => {
    e.preventDefault()
    this.props.removeSelect(index)
  }

  saveSelectValue = (e, id) => {
    let data = {}
    data.id = id
    data.value = e.target.value

    this.props.saveSelectValue(data)
  }

  renderSelections = (selection, index) => {
    const selectedValue = selection.value || ''
    const id = selection.id

    return(
      

         { this.saveSelectValue(e, id) }}
          required
          options={this.props.options}  />

         {this.removeInput(index, e) }}>Remove
      
    )
  }

  render(){
    return (
      

        

        

            {this.props.selections.map(this.renderSelections)}
        

        {this.props.selections.length < 4 &&
            

            Add
            
        }
      
    )
  }
}

const mapStateToProps = (state) => {
  return {
    store: state,
    selections: state.selections,
  }
}

const SingleAddDropdown = connect(mapStateToProps, {saveSelect, removeSelect, saveSelectValue})(Component)

const AddDropdown = () => {
    return (
        

             state.nationality} namespace="nationalities">
                
            
             state.countryOfResidence} namespace="countryOfResidence">
                
            
        
    )
}

export default AddDropdown

reducer.js

import ObjectAssign from 'object.assign'
import { combineReducers } from 'redux'
import { namespaced } from 'redux-subspace'
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) => (index !== action.data)),
      }
    case SAVE_SELECT_OPTION:
      return {
        ...state,
        selections: state.selections.map((selection) => selection.id === action.data.id ? action.data : selection)
      }
    default:
      return state
  }
}


const FormApp = combineReducers({
  namespaced(AddDropdown, "nationality"),
  namespaced(AddDropdown, "countryOfResidence")
})

export default FormApp

NOTE: as per my comment there are some issues with this code and I have not attempted to clean them up for this example.