12. Immutability helperを実装する
シェアしよう
少し工夫が必要 - accepted / - tried
Reactを使っていれば、ちょっとだけ変更したくてstateをcloneする処理をしたことはあるあるですよね。例えばこちらのstate:
const state = {
a: {
b: {
c: 1
}
},
d: 2
}
dを変更したいとき、_.cloneDeepを使うと良い。けど state.a
もcloneされて効率が悪い。
もっといい方法ではこちら:
const newState = {
...state,
d: 3
}
簡潔!けどc
も変更したいときはすごく複雑になる。
const newState = {
...state,
a: {
...state.a,
b: {
...state.b,
c: 2
}
}
}
cloneDeepがマシな気がしてきましたね。この問題を解決するためにやってきたのは Immutability Helper。
Immutability Helperを自作してください。以下のケースをサポートする。
1. {$push: array}
const arr = [1, 2, 3, 4]
const newArr = update(arr, {$push: [5, 6]})
// [1, 2, 3, 4, 5, 6]
2. {$set: any}
const state = {
a: {
b: {
c: 1
}
},
d: 2
}
const newState = update(
state,
{a: {b: { c: {$set: 3}}}}
)
/*
{
a: {
b: {
c: 3
}
},
d: 2
}
*/
$set
を使って配列要素を変更できる
const arr = [1, 2, 3, 4]
const newArr = update(
arr,
{0: {$set: 0}}
)
// [0, 2, 3, 4]
3. {$merge: object}
const state = {
a: {
b: {
c: 1
}
},
d: 2
}
const newState = update(
state,
{a: {b: { $merge: {e: 5}}}}
)
/*
{
a: {
b: {
c: 1,
e: 5
}
},
d: 2
}
*/
4. {$apply: function}
const arr = [1, 2, 3, 4]
const newArr = update(arr, {0: {$apply: (item) => item * 2}})
// [2, 2, 3, 4]
関連するリスト
Ideas and Concepts