Update nested object's property in Redux

Question

My Redux state has the following structure:

const state = {
 transactions: {
    1: {
       TransactionId: 1, Status: "Pending", Type: "Withdrawal", ClientName: "Paul Carter", Amount: "$28.43"
    },

    2: {
      TransactionId: 2, Status: "Completed", Type: "Refill", ClientName: "Caldwell Reid", Amount: "$45.16"
  },
...
}

What is the correct way to update/delete an object from transactions given that I have an id ?

Here is how I tried to update Status property in my reducer but it didn't seem to work, my state remains unchanged.

const transactionsReducer = (state, action) => {
    case CHANGE_TRANSACTION_STATUS:
      return {
        [state.transactions[action.id].Status]: action.status
       }
}

Ajeet Shah · Accepted Answer · 2020-05-10 13:38:37Z

2

You can do this:

const transactionsReducer = (state, action) => {
  switch (action.type) {
    case CHANGE_TRANSACTION_STATUS:
      return {
        ...state,
        transactions: {
          ...state.transactions,
          [action.id]: {
            ...state.transactions[action.id],
            Status: action.status
          }
        }
      }
  }
}

Also, I personally think, it is better to use small-casing here for property names to avoid mistakes. Example:

transactionId: 1, status: "Pending", type: "Withdrawal", clientName...

answered May 10, 2020 at 13:38

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

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

Comments

Vivek Doshi · Accepted Answer · 2020-05-10 13:36:54Z

1

Here you go, it should look something like this :

if you are getting transactions object within state directly :

return {
    ...state,
    [action.id]: {
        ...state[action.id] ,
        Status : action.status
    }
}

And if not then, you need to use this :

return {
    ...state,
    transactions : {
        ...state.transactions ,
        [action.id]: {
            ...state.transactions[action.id] ,
            Status : action.status
        }
    }
}

edited May 10, 2020 at 13:36

answered May 10, 2020 at 13:30

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Comments

cucaracho · Accepted Answer · 2020-05-10 13:42:11Z

0

transactions should be an array (it's a collection of entities). The 'id' key is redundant, it's already represented by 'TransactionId' (single source of truth). like this:

const state = {
 transactions: [
     {
       TransactionId: 1, Status: "Pending", Type: "Withdrawal", ClientName: "Paul Carter", Amount: "$28.43"
    },

     {
      TransactionId: 2, Status: "Completed", Type: "Refill", ClientName: "Caldwell Reid", Amount: "$45.16"
  },
...
]

then you can simply use filter for delete and map for update:

return {
    ...state,
    transactions: state.transactions.filter(txn => txn.TransactionId !== action.deletedId)
}

answered May 10, 2020 at 13:42

cucaracho

1846 bronze badges

2 Comments

Oleksandr Fomin Over a year ago

That's what I did initially and it worked perfectly fine. But the task specifically says that I have to introduce a hash map to optimize transaction search. I'm no expert but since we have to copy each level of nesting it hardly looks like optimization to me

cucaracho Over a year ago

ok, the optimization is never utilized anyway, since you construct a new state object every time the reducer is invoked (return {...state}) - that's how redux works. If you wan't to mutate state, you should do higher level platforms like Java or C++

Collectives™ on Stack Overflow

Update nested object's property in Redux

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related