てすと

たかろぐ

自分のログを刻みます。

Reactとimmutable.js

生活習慣が後ろにズレまくってて辛い...。

今日は、以下の記事を読んでイイなと思ったので、共有したいと思います。 WantedlyのReact(+Redux)とimmutable.jsを組み合わせることで、こんなメリットがあるよという話です。

www.wantedly.com

詳しくはリンク先のページを見てもらうとして、簡単にまとめると以下の2つのメリットがあるみたいですね。

  • パフォーマンスの向上
  • シンプルな記述

パフォーマンスの向上

この旨の記述は、公式の方でも言及されています。 ただ、読んでみた所「immutable.jsを使って状態管理をすれば、状態オブジェクトの"参照"を確認するだけで変更を検知できるようになるから、パフォーマンスが向上しますよ。」 みたいなこといってますね。

確かにそうだけど、まぁこれはReduxを導入していれば誰でもやっていることですね。

reactjs.org

シンプルな記述

これは個人的にかなり魅力的です。

ReduxではReducerで現在の状態+差分情報を受け取って、新しい状態を返しますが、その時Object.assignやスプレッド演算子を使って何やかんやするんですよね。

これで書くと、特にネストが深くなると記述がゴチャゴチャしてくるんですよね。

でも、immutable.jsのRecordを継承させて状態オブジェクトを作れば、その辺りが簡潔に書けるようになると思います。

他にも、モデルをRecordを継承させたクラスにすることで、色々と便利になりそうです。(昨日も同じようなこと書いた)

また新しくプロジェクトを立ち上げる時は、状態部分とモデル部分にimmutable.jsを導入してみたいと思います。