How add item in nested array of object in redux reducer

Question

Here is my example initial state:

let initialState = {
    data: {
        name: 'john',
          books: [
              {
                  name: 'a',
                  price: 220
              }
          ]
    }
}

How I can add new book item to books ?

I tried already

return {
        ...state,
        data :{
          ...state.data,
          books:{
              ...state.data.books,
              name : state.data.books.concat(action.payload.item.name),
              price : state.data.books.concat(action.payload.item.price)
          }
      }
      };

Any idea for that?

Important: I don't want to delete item which already in books I want to add new one with action payload

do you wanted name and price to be name: 'aaa, aaa' like this?? — lost_in_magento
– lost_in_magento, Commented Aug 22, 2019 at 17:04

Dominik Matis · Accepted Answer · 2019-08-22 17:05:41Z

6

You missed some braces there, especially, books is array and you are inserting new object

return {
        ...state,
        data: {
          ...state.data,
          books: [
              ...state.data.books,
              {
                  name: action.payload.item.name,
                  price: action.payload.item.price
              }
          ]
      }
};

edited Aug 22, 2019 at 17:05

answered Aug 22, 2019 at 16:59

Dominik Matis

2,15612 silver badges15 bronze badges

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

2 Comments

Clarity Over a year ago

In this case name and price will be arrays, but they're strings.

Dominik Matis Over a year ago

I edited it, I think this author was trying to accomplish

Clarity · Accepted Answer · 2019-08-22 17:07:05Z

0

First of all, books is array. Second, if you want just to add a new item to the array, you can use array spread operator.

books: state.data.books.concat(action.payload.item) would also work.

return {
  ...state,
  data: {
    ...state.data,
    books: [
      ...state.data.books,
      action.payload.item
    ]
  }
};

edited Aug 22, 2019 at 17:07

answered Aug 22, 2019 at 17:01

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Comments

Mulan · Accepted Answer · 2019-08-22 17:17:36Z

Let's make our jobs easier by inventing tools of convenience -

const update = (key, { [key]: value, ...state }, f) =>
  ({ ...state, [key]: f (value) })

const initState =
  { data:
      { name: "john"
      , books: [ { name: "a", price: 20 } ]
      }
  }

const payload =
  { item: { name: "b", price: 30 } }

const nextState =
  update ('data', initState, x =>
    update ('books', x, arr =>
      [ ...arr, payload.item ]
    )
  )

console.log(initState)
console.log(nextState)

Output

// initState
{ data:
    { name: "john"
    , books:
        [ { name: "a", price: 20 } ]
    }
}

// nextState
{ data:
    { name: "john"
    , books:
        [ { name: "a", price: 20 }
        , { name: "b", price: 30 }
        ]
    }
}

Gabriel Martinez Bustos · Accepted Answer · 2019-08-22 17:19:10Z

-1

The answer is easy look at this

const book = {
            name : action.payload.item.name,
            price : action.payload.item.price
           };
return {
    ...state,
    data :{
      ...state.data,
      books: state.data.books.concat(book)              
      }      
};

you can find immutable update patterns here

Redux updated patterns

answered Aug 22, 2019 at 17:19

Gabriel Martinez Bustos

5111 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

How add item in nested array of object in redux reducer

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related