Каков пример нормализации состояния в приложении React Redux?

Я читаю редукторы Redux docs и не понимаю, как нормализация состояния будет работать. Текущее состояние в Примере таково:

{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}

можете ли вы привести пример того, как будет выглядеть выше, если мы последуем ниже?

для пример, сохраняя todosById: {id - > todo } и todos: array внутри государство было бы лучшей идеей в реальном приложении, но мы сохраняем пример простой.

6
react-redux reactjs redux state

2 ответов

этот пример прямо из Normalizr.

[{
  id: 1,
  title: 'Some Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}, {
  id: 2,
  title: 'Other Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}]

можно нормализовать таким образом -

{
  result: [1, 2],
  entities: {
    articles: {
      1: {
        id: 1,
        title: 'Some Article',
        author: 1
      },
      2: {
        id: 2,
        title: 'Other Article',
        author: 1
      }
    },
    users: {
      1: {
        id: 1,
        name: 'Dan'
      }
    }
  }
}

в чем преимущество нормализации?

вы можете извлечь точную часть дерева состояния, которое вы хотите.

например - у вас есть массив объектов, содержащих информацию о статьях. Если вы хотите выбрать конкретный объект из этого массива, вам придется перебрать всю матрица. В худшем случае желаемый объект отсутствует в массиве. Чтобы преодолеть это, мы нормализуем данные.

чтобы нормализовать данные, сохраните уникальные идентификаторы каждого объекта в отдельном массиве. Назовем этот массив results.

result: [1, 2, 3 ..]

и преобразовать массив объектов в объект с ключами как id(см. второй фрагмент). Назовите этот объект entities.

в конечном счете, чтобы получить доступ к объекту с id 1, просто сделать это- entities.articles["1"].

4

можно использовать normalizr для этого.

Normalizr принимает JSON и схему и заменяет вложенные сущности их идентификаторами, собирая все сущности в словари.

например,

[{
  id: 1,
  title: 'Some Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}, {
  id: 2,
  title: 'Other Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}]

можно нормализовать до

{
  result: [1, 2],
  entities: {
    articles: {
      1: {
        id: 1,
        title: 'Some Article',
        author: 1
      },
      2: {
        id: 2,
        title: 'Other Article',
        author: 1
      }
    },
    users: {
      1: {
        id: 1,
        name: 'Dan'
      }
    }
  }
}
0