Как обновить свойства вложенного состояния в реакции, используя неизменный способ - PullRequest
Новая
       55

Как обновить свойства вложенного состояния в реакции, используя неизменный способ

0 голосов
/ 23 марта 2020

Я пытаюсь обновить дочерние записи на основе ответов API в редукторе. Мое текущее состояние избыточности содержит данные в следующем формате: 

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
        }
      ]
    }
  ]
}

Я получаю данные child1 из API в следующем формате: 

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

Как правильно обновить количество для child1 ?

Я использую неизменный пакет. https://www.npmjs.com/package/immutable

1 Ответ

1 голос
/ 23 марта 2020

Честно говоря, я не вижу смысла использовать неизменяемый. js, если вы не понимаете синтаксис распространения или считаете его слишком многословным, вы можете использовать этот помощник . 

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)
);

Вы не опубликовали никакого кода того, как вы сохраняете эти данные в состоянии, вы использовали для этого неизменяемые классы. js? Если вы это сделали, то попрощайтесь с редукциями инструментов разработчика и записью состояния на консоль. Лучше всего оставить это как объекты данных (сериализуемые с JSON .stringify)

...