immutability-helperとES6 Computed property namesを使い、Reactのimmutableなstateの更新処理を簡潔に行うTipsです。
Computed property names
{}
を使ったオブジェクト生成時にキーを動的に指定できます。例えば以下の2つのオブジェクトobj1
、obj2
はdeepEqualです。
const key = 'foo'
const obj1 = {
foo: 'bar'
}
const obj2 = {
[key]: 'bar'
}
immutability-helper
stateの更新にはimmutability-helperを用います。ネストしたstateオブジェクトを簡潔かつ安全に更新できます。例えば、state = x.y.z.value
におけるvalue値の更新は、以下のパラメータを指定することで可能です。
const newState = update(state, { x: { y: { z: { value: { $set: 'new value' } } } } })
複雑なstateを更新する
例えば以下の構造のoldState
について、
{
foo: [
{ id: 100, bar: [] }, { id: 101, bar: [] }, { id: 102, bar: [] }
]
}
動的に渡される値n
に関してid === n
のオブジェクトのbar
プロパティ(配列)に要素element
を追加したいとします。
以下の方法でimmutableな新しいstateが得られます。
import update from 'immutability-helper'
...
const n = 101
let index
oldState.foo.map(((f, i) => {
if (f.id === n) {
index = i
}
}))
const newState = update(oldState, { foo: { [index]: { bar: { $push: [element] } } } })
得られるnewState
は以下の構造になります。
{
foo: [
{ id: 100, bar: [] }, { id: 101, bar: [element] }, { id: 102, bar: [] }
]
}
配列のindex
値を先に計算しておき、Computed property nameとしてネストしたキーに[index]
を指定すると、index
番目の配列の要素にアクセスすることができます。