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.