Updating state of deep object value in React/Redux using immutable.js

Question

I have this pretty deeply nested state array and need to update the Hours field by Employee, Task, and Week. I've attempted numerous ways to do this with Immutable but not having success, any help?

Here is an example of my data :

[{
  "Employee": "John Doe",
  "Other Data": "test",
  "Tasks": [{
    "AccessType": "Confidential",
    "DueDate": "2016-02-26 23:59:59",
    "taskId": "3",
    "TaskTitle": "testTitle",
    "Weeks": {
      "2016-10-10": {
        "Hours": "3"
      }
    }
  }]
}, {
  "Employee": "Bill Der",
  "Other Data": "test",
  "Tasks": [{
    "AccessType": "Confidential",
    "DueDate": "2016-02-26 23:59:59",
    "taskId": "3",
    "TaskTitle": "testTitle",
    "Weeks": {
      "2016-10-10": {
        "Hours": "3"
      }
    }
  }]
}]

Assume you are attempting this in the reducer? What information do you have to update with? What is the current state when you are updating?Please show your code of what you tried so we can help :). — ajmajmajma
– ajmajmajma, Commented Nov 9, 2016 at 16:18
You may also check out github.com/engineforce/ImmutableAssign, which is a lightweight immutable helper that supports TypeScript type checking, and allows you to continue working with POJO (Plain Old JavaScript Object). — engineforce
– engineforce, Commented Nov 18, 2016 at 8:20

ajmajmajma · Accepted Answer · 2016-11-10 16:44:14Z

1

You are missing a bunch of information for me to fully answer this for you, but I can show you how I would do something like this otherwise.

You can take advantage of all the functions immutable js provides you with. So lets say you have an object with the information needed to mutate your immutable object, something like this :

var changeHours = {
  "Employee": "John Doe",
  "TaskTitle": "testTitle",
  "Week": '2016-10-10',
  "Hours": "5"
}

And we have a basic state like you have there set up like this :

 var myState = Immutable.fromJS([{
  "Employee": "John Doe",
  "Tasks": [{
    "AccessType": "Confidential",
    "DueDate": "2016-02-26 23:59:59",
    "taskId": "3",
    "TaskTitle": "testTitle",
    "Weeks": {
      "2016-10-10": {
        "Hours": "3"
      }
    }
  }]
}]);

Note: I did not add more the the arrays, but we will map over them so they will be taken into account.

You can use immutables map to iterate over and find the items you are looking for, something like this :

  var newstate = myState.map((k, v) => {
  if (k.get('Employee') === changeHours.Employee) {
    return k.get('Tasks').map((k, v) => {
      if (k.get('TaskTitle') === changeHours.TaskTitle) {
                return k.setIn(['Weeks', changeHours.Week, 'Hours'], changeHours.Hours);
      }
      return k;
    })
    return k;
  }
 return k;
});

To see it in action - http://fiddle.jshell.net/djj6u8xL/63/ . I am iterating over each array level with map and finding the correct node by checking based on our changeHours object and immutables get, then once I am at the right level I just use setIn. You can use updateIn as well, it just depends on your scenario.

In the future, please provide all the information for your question, not just a picture of the data, it will be much easier to help you :) (and not have to type out the data structure manually).

Edit: Update based on comment - http://fiddle.jshell.net/qxbq1nq3/9/

the code :

  function newTasks(k) {
  return k.get('Tasks').map((k, v) => {
    if (k.get('TaskTitle') === changeHours.TaskTitle) {
      return k.setIn(['Weeks', changeHours.Week, 'Hours'], changeHours.Hours);
    }
    return k;
  });
}

var newstate = myState.map((k, v) => {
  if (k.get('Employee') === changeHours.Employee) {
    return k.set('Tasks', newTasks(k));
  }
  return k;
});

edited Nov 10, 2016 at 16:44

answered Nov 9, 2016 at 16:54

ajmajmajma

14.3k25 gold badges83 silver badges139 bronze badges

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

2 Comments

SirM Over a year ago

This is a great start but not working 100%. Here is a more realistic tweak for my purposes: fiddle.jshell.net/qxbq1nq3 Note the output has the second employee object as undefined, in addition the first Employee object is missing data like the "OtherData" field.

ajmajmajma Over a year ago

@SirM updated it for you. Please provide your data, code, and requirements in the questions you ask in the future, not just a picture.

Collectives™ on Stack Overflow

Updating state of deep object value in React/Redux using immutable.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related