ImmutableJS Recordでarray propertyをImmutableに扱う

March 21, 2017

ImmutableJSで下記の用にモデルを設計したとします。

import { Record, fromJS } from 'immutable';

const UserRecord = Record({
  id: null,
  name: null,
  profile_image_url: null,
  bio: null,
  channels: [],
})

下記のようにUserRecordを生成した場合、

const user = new UserRecord({
  id: 1,
  name: "yayoc",
  profile_image_url: "",
  bio: "",
  channels: [
    {id: 1, name: "channel 1"},
    {id: 2, name: "channel 2"},
    {id: 3, name: "channel 3"},
  ],
});

userのchannelsを確認するとList型ではなくObjectの配列が返ります。
Recordでは、配列のプロパティに関しては、Immutableに変換してくれません。

Imgur

そこで、下記のようにUserRecordを継承したUser classを作成して、
constuructorをオーバーライドすることで、配列に関してもImmutableに変更することが可能になります。

import { Record, fromJS } from 'immutable';

const UserRecord = Record({
  id: null,
  name: null,
  profile_image_url: null,
  bio: null,
  channels: [],
})

class User extends UserRecord {
  constructor(values) {
    super(fromJS(values));
  }
}

const user = new User({
  id: 1,
  name: "yayoc",
  profile_image_url: "",
  bio: "",
  channels: [
    {id: 1, name: "channel 1"},
    {id: 2, name: "channel 2"},
    {id: 3, name: "channel 3"},
  ],
});

Imgur

参考

Record