Когда придет время изменить состояние Redux на неизменное, Immutable.js, вероятно, станет вашим первым выбором, поскольку он поддерживается Facebook.

Однако использование Immutable.js для управления вашим состоянием Redux требует, чтобы вы использовали API Immutable.js для чтения свойств ваших неизменяемых объектов. Компонентам React часто нужно только читать из состояния Redux, но не изменять состояние. Чтобы прочитать состояние Immutable.js Redux в компоненте React, вам нужно будет сделать что-то вроде этого:

render() {
    const { cat } = this.props;
    return (
      <Cat name={cat.get('name')} />
    );
  }

Представьте, что в приведенном выше примере кода this.props.cat - это объект Immutable.js, который предоставляется этому компоненту из состояния Redux .cat.get() - это API Immutable.js, который необходимо вызывать для чтения отдельных свойств ваших неизменяемых объектов.

Это связывает ваши компоненты с API Immutable.js. Вы можете предпочесть явный API для чтения из неизменяемых объектов, просто чтобы знать, когда вы имеете дело с неизменяемым состоянием. Но если компоненты React только считывают значения из состояния Redux, а не изменяют состояние Redux, действительно ли им нужно иметь это явное различие?

Есть способы обойти эту связь API в ваших компонентах React. Наиболее распространенный пример удаления этой связи - использование API Immutable.js для преобразования объекта Immutable в собственный объект JavaScript, а затем абстрагирование этого преобразования в ваших селекторах состояния Redux, как описано в этом посте. Но предлагаемые шаблоны добавляют излишнюю сложность вашему решению.

Случай с бесшовным неизменным

Seamless-immutable предоставляет неизменяемые структуры данных для JavaScript, которые обратно совместимы с обычными массивами и объектами JS. Это означает, что вы можете использовать seamless-immutable для создания неизменяемого состояния, но вы можете просто читать свойства ваших неизменяемых объектов состояния, как если бы они были собственными объектами JavaScript, без какого-либо преобразования. Итак, наш пример рендеринга будет выглядеть следующим образом:

render() {
    const { cat } = this.props;
    return (
      <Cat name={cat.name}) />
    );
  }

Это упрощает разработку компонентов React. Чтение свойств неизменяемого состояния ничем не отличается от чтения свойств простых старых объектов JavaScript.

Резюме

Если вы собираетесь ввести неизменяемое состояние в свое решение React, вы принимаете отличное решение в направлении большей предсказуемости состояния независимо от того, какую неизменяемую библиотеку вы выберете. Однако, если вы не являетесь поклонником API-интерфейса Immutable.js для чтения состояния, обратите внимание на бесшовный-неизменяемый. Ваши требования, а также понимание плюсов и минусов каждой библиотеки в конечном итоге должны определять ваш выбор.