CODEWITHSUNDEEP
reactjsreduximmutable.jssaga
Kd dev
Kd dev

Reputation: 25

How to update nested state properties in react using immutable way

I am trying to update children records based on api response in reducer. My current redux state is containing data in following format :

const container = {
  data: [
    {
      id: "5e58d7bc1bbc71000118c0dc",
      viewName: "Default",
      children: [
        {
          id: "5e58d7bc1bbc71000118c0dd",
          description: "child1",
          quantity: 10
        },
        {
          id: "5e58d7bc1bbc71000118c0ff",
          description: "child2",
          quantity: 20
        },
        {
          id: "5e58d7bc1bbc71000118c0gg",
          description: "child3",
          quantity: 30
        }
      ]
    }
  ]
}

I am getting child1 data from api in following format : 

{
    id:"5e58d7bc1bbc71000118c0dd",
    description:"child1",
    quantity:20  // Quantity is updated 
}

How can i update quantity for child1 in correct way ?

I am using immutable package. https://www.npmjs.com/package/immutable

Upvotes: 0

Views: 163

Answers (1)

HMR
HMR

Reputation: 39270

I honestly see no reason to use immutable.js, if you don't understand spread syntax or find it too verbose then you can use this helper.

const REMOVE = () => REMOVE;
const set = (object, path, callback) => {
  const setKey = (current, key, value) => {
    if (Array.isArray(current)) {
      return value === REMOVE
        ? current.filter((_, i) => key !== i)
        : current.map((c, i) => (i === key ? value : c));
    }
    return value === REMOVE
      ? Object.entries(current).reduce((result, [k, v]) => {
          if (k !== key) {
            result[k] = v;
          }
          return result;
        }, {})
      : { ...current, [key]: value };
  };
  const recur = (current, path) => {
    if (path.length === 1) {
      return setKey(
        current,
        path[0],
        callback(current[path[0]])
      );
    }
    return setKey(
      current,
      path[0],
      recur(current[path[0]], path.slice(1))
    );
  };
  return recur(object, path, callback);
};
const data = {
  name: [{ hello: 'world', stay: true }, 4],
  list: [1, 2, 3],
};
console.log(
  'setting nested value',
  set(data, ['name', 0, 'hello'], () => 'hello world')
    .name[0].hello
);
console.log(
  'doubling nested value',
  set(data, ['name', 1], x => x * 2).name[1]
);
console.log(
  'removing nested value',
  set(data, ['name', 0, 'hello'], REMOVE).name[0]
);
console.log(
  'adding to an array',
  set(data, ['list'], v => [...v, 4]).list
);
console.log(
  'mapping an array',
  set(data, ['list'], v => v.map(v => v * 8)).list
);
console.log(
  'data is not mutated',
  JSON.stringify(data, undefined, 2)
);

You didn't post any code of how you save that data in state, did you use the immutable.js classes for it? If you did then say goodbye to redux dev tools and logging state to the console. Best to just leave it as data objects (serializable with JSON.stringify)

Upvotes: 1

Related Questions