Immer
Immutable.jsみたいなやつ
Immutable.jsより学習コストが低く、型との相性が良い
Immutable.jsより剥がすのも楽
用語
current
現在の状態
全てのオブジェクトの現在の状態のことを言っている
draft
immer内で編集する部分
この中で好きなように編集する
immerから抜けたタイミングで新しいobjectが生成されてcurrentが新しいものを見る
arrayのn番目を更新したい
これの前に
findIndex かなにかでindexを特定しておく必要があるts return produce(this, t => {
t.comments[index] = comment;
});
//spliceのほうがええんか(?)
return produce(this, t => {
t.comments.splice(index, 1, comment);
});idがnなものを消す
filterを使う
tsreturn produce(this, t => {
t.items = t.items.fileter(item => item.itemId === itemdId);
}v7かv8ぐらいで
ts[immerable] = truehooksもある
useImmer
API
produce
tsconst obj = { a: { b: { c: 1, d: 2 } }, e: 3 }
const newObj = immer(obj, draft => {
draft.a.b.d = 4
})↑これ動かないかも
draft.なんか でアクセスできるのは一つまでっぽい(?) draft.a = 4 はいけるけど draft.a.b = 4 はだめ、みたいなdocsの中でその言及を探したい
setAutoFreeze(false) をするとできるようになった。ということは結局、immerの扱い方がどこかおかしいのか
setAutoFreeze() デフォルトでは、devモードではtrueになり、productionモードではfalseになる
trueにしているとパフォーマンスに影響するため。
trueにしていると、produceの外部では破壊的代入をできないようにする
逆にfalseにしているとimmerを使っている意味の半分ぐらいが無意味になる？
非同期関数の中でやつ
この辺も見ないと
draft.a.b = 4 みたいにかいたときに、エラーになるときとならない時がある message: "Cannot assign to read only property 'hogehoge' of object '#<Object>'" draft.a.b = 4 みたいにかいたときに、更新されてない時があるネスト深くなったときかなー、再現性がない
produceの中でproduceを使ったら動いた。意味がわからない
ts// before
return produce(this, t => {
beforeGenreIds.forEach(beforeGenreId => {
t.genres[beforeGenreId].option.postPics = PostPicsFactory.create(
t.genres[beforeGenreId].option.postPics
).deletePostId(postId);
});
});
// beforeの書き換え
return produce(this, t => {
beforeGenreIds.forEach(beforeGenreId => {
const tmp = PostPicsFactory.create(t.genres[beforeGenreId].option.postPics).deletePostId(postId); // ここまでは正しい
t.genres[beforeGenreId].option.postPics = tmp; // ここで反映されていない
});
});
// after
// 最悪すぎる。冗長すぎ
return produce(this, t => {
beforeGenreIds.forEach(beforeGenreId => {
t.genres[beforeGenreId].option = produce(
t.genres[beforeGenreId].option,
o => {
o.postPics = PostPicsFactory.create(
t.genres[beforeGenreId].option.postPics
).deletePostId(postId);
}
);
});
});似たライブラリ
死んだ
参考
作者が書いた記事
Immutable.jsとの違い