React-Redux , state not updating correctly

Question

I have a small invoicing app, that should show invoices on a list and be able to add new/edit old invoices also.

State is managed with redux, and binding is done with React-redux.

Everything is peachy until I try to call useDispatch hook with my form values. It dispatches the correct values, but somewhere along the way to the reducer all data from the rows array disapper. All the other data gets dispatched correctly.

My form values that gets sent to the reducer:

dispatch(newInvoice({
           "id": 4,
           "name": " xvsvsd",
           "street": "vsdvs",
           "zip": "sdfss",
           "city": "sefsd",
           "due_date": "2020-07-01",
           "rows": [
             {
               "quantity": 5,
               "currency": "eur",
               "unit_price": 3,
               "unit_of_measurement": "kpl",
               "vat": 4,
               "name": "test",
           },
           {
               "quantity": 4,
               "currency": "eur",
               "unit_price": 3,
               "unit_of_measurement": "kpl",
               "vat": 4,
               "name": "test1",

           }]
           
         }))

My action

export const newInvoice = (props) => {
    console.log(props)

    return {
        type: 'ADD_NEW',
        data: {
            
            id: props.id,
            name: props.name,
            street: props.street,
            zip: props.zip,
            city: props.city,
            due_date: props.due_date,
            rows: [
                {
                    quantity: props.rows.quantity,
                    currency: props.rows.currency,
                    unit_price: props.rows.unit_price,
                    unit_of_measurement: props.rows.unit_of_measurement,
                    vat: props.rows.vat,
                    name: props.rows.name,
                },
            ]
        }
    }
}

My reducer

const invoiceReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'ADD_NEW':
            console.log(state)
            console.log(action.data)
            return [...state, action.data  ]
    
      default:
        return state
    }
}

Edit You asked for initialState, it is this:

[
    {
        "id": 1,
        "name": "Test company",
        "street": "Testikatu 1",
        "zip": "00100",
        "city": "Helsinki",
        "due_date": "2020-08-01",
        "rows": [
            {
                "quantity": 3,
                "currency": "EUR",
                "unit_price": 1.24,
                "unit_of_measurement": "kpl",
                "vat": 24,
                "name": "Sample invoice row 1"
            },
            {
                "quantity": -1,
                "currency": "EUR",
                "unit_price": 2.48,
                "unit_of_measurement": "kpl",
                "vat": 24,
                "name": "Sample invoice row 2"
            }
        ]
    },
    {
        "id": 2,
        "name": "Another test company",
        "street": "Testikatu 3",
        "zip": "00100",
        "city": "Helsinki",
        "due_date": "2020-08-05",
        "rows": [
            {
                "quantity": 1,
                "currency": "EUR",
                "unit_price": 150,
                "unit_of_measurement": null,
                "vat": 0,
                "name": "Sample row"
            }
        ]
    }
]

When I console.log the action.data it shows undefined on all the fields of the rows array.

Thanks alot in advance.

Answer 1

try modifying your action like this

export const newInvoice = (props) => {
console.log(props)

return {
    type: 'ADD_NEW',
    data: {
        
        id: props.id,
        name: props.name,
        street: props.street,
        zip: props.zip,
        city: props.city,
        due_date: props.due_date,
        rows: props.rows.map(row => ({...row})
    }
}
}

because your rows is an array so if you try to access row without index directly it will give undefined