Multiple immutable changes on state arrays

Question

I have the following currentState. When i add the recipient, the new recipient should be appended to recipient.allIds and recipientProduct with default qty = 1. I am stuck at appending to the recipientProduct part. This should be done in immutable way as it is a redux state.

let currentState = {
  product: {
    allIds: ['1', '5'],
  },
  recipient: {
    allIds: ['1'],
  },
  recipientProduct: [{
        recipientId: '1',
        productId: '1',
        qty: '3'
    }, {
        recipientId: '1',
        productId: '5',
        qty: '3'
    }],
};

When I append a new recipient:

addRecipient = (recipientId) => {
    // when recipientId = 2
    // note quantity is always default to 1

    -> append productIds to product.allIds if not exists
    -> loop through all product from product.allIds
         loop through all recipient from recipient.allIds
         if (recipientId === recipientId && productId === productId) {
              remain
          } else {
            // append with default qty 1
        }

}

This will be the newState:

newstate = {
    product: {
        allIds: ['1', '5'],
    },
    recipient: {
        allIds: ['1', '2'],
    },
    recipientProduct: [{
        recipientId: '1',
        productId: '1',
        qty: '3'
    }, {
        recipientId: '1',
        productId: '5',
        qty: '3'
    },{
        recipientId: '2',
        productId: '1',
        qty: '1'
    }, {
        recipientId: '2',
        productId: '5',
        qty: '1'
    }],
}

Answer 1

I think it is a reducer that should handle the logic being described, not an action creator (?) addRecipient.

So, as I understood, in common Redux workflow you need to modify global state properties recipient (new recipient should be pushed in) and recipientProduct (items that correspond to each product with default quantity of 1 should be appended) upon dispatching APPEND_RECIPIENT action or such.

My solution for that would be the following:

appReducer = (state=initialState, action) => {
        switch(action.type){
          case 'APPEND_RECIPIENT' : {
            let {payload: recipientId} = action,
                  {recipient:{allIds:recipientIds}, recipientProduct, product:{allIds:productIds}} = state
            if(recipientIds.includes(recipientId)) return state
            recipientIds = [...recipientIds, recipientId]
            recipientProduct = [...recipientProduct,...productIds.map(productId => ({productId, recipientId, qty: '1'}))]
            return {...state, recipient:{allIds:recipientIds}, recipientProduct}
          }
          default: return state
        }
      }

You may find the live-demo of that concept below:

//dependencies
const { useState } = React,
      { render } = ReactDOM,
      { createStore } = Redux,
      { connect, Provider } = ReactRedux

//initial state, reducer and store
const initialState = {product:{allIds:['1','5']},recipient:{allIds:['1']},recipientProduct:[{recipientId:'1',productId:'1',qty:'3'},{recipientId:'1',productId:'5',qty:'3'}]},
      appReducer = (state=initialState, action) => {
        switch(action.type){
          case 'APPEND_RECIPIENT' : {
            let {payload: recipientId} = action,
                  {recipient:{allIds:recipientIds}, recipientProduct, product:{allIds:productIds}} = state
            if(recipientIds.includes(recipientId)) return state
            recipientIds = [...recipientIds, recipientId]
            recipientProduct = [...recipientProduct,...productIds.map(productId => ({productId, recipientId, qty: '1'}))]
            return {...state, recipient:{allIds:recipientIds}, recipientProduct}
          }
          default: return state
        }
      },
      store = createStore(appReducer)
      
//append recipient form ui component
const AppendRecipient = ({onAppendRecipient, onInput}) => {
  const [inputValue, setInput] = useState()
  return (
    <form onSubmit={e => (e.preventDefault(), onAppendRecipient(inputValue))}>
      <input type="number" onKeyUp={e => setInput(e.target.value)} />
      <input type="submit" name="Append Recipient" />
    </form>
  )
}
//connect onAppendRecipient handler to dispatching 'APPEND_RECIPIENT' action
const mapDispatchToProps = dispatch => ({
        onAppendRecipient: recipientId => dispatch({type:'APPEND_RECIPIENT', payload:recipientId})
      }),
      AppendRecipientContainer = connect(null, mapDispatchToProps)(AppendRecipient)
//mirroring recipientProducts
const RecipientProducts = ({products, productsQty}) => (
  <div>
    {
      products.map(({recipientId,productId,qty},key) => <div {...{key}}>recipient:{recipientId}, product:{productId}, qty: {qty}</div>)
    }
  </div>
)
//connect output element to global recipientProducts
const mapStateToProps = ({recipientProduct}) => ({products:recipientProduct, productsQty:recipientProduct.length}),
      RecipientProductsContainer = connect(mapStateToProps)(RecipientProducts)
      
//render the entire app
render (
  <Provider store={store}>
    <AppendRecipientContainer />
    <RecipientProductsContainer />
  </Provider>,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.1.3/react-redux.min.js"></script><div id="root"></div>