immutability-helperとES6 Computed property namesを使ってstateを更新する

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番目の配列の要素にアクセスすることができます。