Adding item to array in child object of a child object via reducer

Question

I apologize if my terminology is incorrect. I am very new to reactjs and react-redux (couple days).

The challenge I am trying to overcome is adding an item in store.order.cart.items. My store structure is as such:

{
    order:
        cart:
            items: [
                {name: "product a"},
                {name: "product b"}
            ]
}

My reducer is as follows:

import ApplicationState from '../application-state';
import { ADD_PRODUCT } from "../constants/action-types";

const initialState = ApplicationState;

const rootReducer = (state = initialState, action) => {

  switch (action.type) {
    case ADD_PRODUCT:
        return {
            ...state, order: {
                ...state.order, cart: {
                    ...state.cart, items: [
                        ...state.items, action.payload
                    ]
                }
            }
        };
    default:
      return state;
  }
};

export default rootReducer;

My action for ADD_PRODUCT is as follows:

import { ADD_PRODUCT } from "../constants/action-types"

export const addProduct = product => ({ type: ADD_PRODUCT, payload: product });

And my action type constants (constants/action-types):

export const ADD_PRODUCT = "ADD_PRODUCT";

When I dispatch my addProduct action (testing this via the browser console: store.dispatch( addProduct({ name: "product c" }) )

I get the following error:

app.js:36995 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.from (/native)
    at _toConsumableArray (app.js:36995)
    at rootReducer (app.js:37009)
    at Object.dispatch (app.js:13839)
    at <anonymous>:1:7

What am I doing wrong? What is the correct way to get the new item added to the order.cart.items array?

Can you show "../constants/action-types"?

acdcjunior
– acdcjunior

2018-03-31 01:19:53 +00:00
Commented Mar 31, 2018 at 1:19 — acdcjunior
– acdcjunior, Commented Mar 31, 2018 at 1:19
@acdcjunior I have added this to my post. Thank you

kambythet
– kambythet

2018-03-31 01:22:30 +00:00
Commented Mar 31, 2018 at 1:22 — kambythet
– kambythet, Commented Mar 31, 2018 at 1:22

Anthony · Accepted Answer · 2018-03-31 01:33:43Z

1

items: [
  ...state.items, action.payload
]

In this excerpt above, you have attempted to spread ...state.items into the items array, but items is actually at state.order.cart.items;

Similarly:

cart: {
  ...state.cart, 
}

cart is actually at state.order.cart

Deeply nested situations like this are why it's best to flatten your state where possible and use combineReducers(). Alternately you could look at an immutability helper to help with immutably setting deeply nested state

answered Mar 31, 2018 at 1:33

Anthony

6,5122 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kambythet Over a year ago

Thank you! This makes sense and helps tremendously. I'll also look into combineReducers() and an immutability helper

Collectives™ on Stack Overflow

Adding item to array in child object of a child object via reducer

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related